摘要:是的,在這種情況下可以好像是可以使用插件了。第四步,重啟服務使用經驗之插件運用到插件普適法上善若水的博客結果是找不到,報了錯。。。
背景:這幾天我在使用使用angular4做項目,由于也是才接觸angular和typescript所以遇到不少的問題。這是剛才解決一個的引用外部插件編譯出錯的問題。
問題描述:
使用的插件名稱:jwplayer.js
插件作用:視頻播放插件
第一步:使用npm start編譯并且開服務
Angular4使用經驗之:jwplayer插件運用到angular4插件普適法 - 877430318 - 上善若水的博客
可以看到現在服務以及啟動成功,接下來引入jwplayer插件
第二步:引入并使用jwplayer插件
Angular4使用經驗之:jwplayer插件運用到angular4插件普適法 - 877430318 - 上善若水的博客
可以看到現在表示路徑不對,我把路徑改好,是不是就可以了啦?
第三步:修改路徑
Angular4使用經驗之:jwplayer插件運用到angular4插件普適法 - 877430318 - 上善若水的博客
下載看來基本功能是實現了?能夠播放視頻了吧。是的,在這種情況下可以好像是可以使用插件了。
但,如果將 npm start 開的服務器關了,在從新開,看是什么情況。
第四步,重啟服務
Angular4使用經驗之:jwplayer插件運用到angular4插件普適法 - 877430318 - 上善若水的博客
結果是找不到jwplayer,報了錯。。。
既然報了錯就想解決辦法,一般嘛想,如果在ts中引入出問題,那我直接在html中使用script行嗎
第五步,在html中使用script引入
Angular4使用經驗之:jwplayer插件運用到angular4插件普適法 - 877430318 - 上善若水的博客
可以看到,雖然編譯的使用沒有報錯了,把服務給開起來了,但是在
代碼什么事也沒干,就想沒有它一樣。
既然這樣不行,我就繼續想辦法,我就想現在是這個script標簽沒有效果,如果它生效那是不是這個播放插件就可以用了?
第六步:讓script標簽生效
注意:現在在jwplayer.js中的路徑"jwplayer.html5.js",我又把它改回來了,不然路徑又不對頭了??傊褪沁@樣就是對的了,不用去改jwplayer原生代碼。
而且重啟服務也可以的。。。
關鍵代碼:
/** * 使用計時器,解決插件使用問題 */ var oScript1 = document.createElement("script"), oScript2 = document.createElement("script"); oScript1.src = "app/assets/lib/jwplayer/jwplayer.js"; oScript2.innerHTML = ` var timer = setInterval(function() { if(window.jwplayer) { /** * 首頁視屏播放 */ var player = jwplayer("player-container").setup({ flashplayer: "app/assets/lib/jwplayer/jwplayer.flash.swf", file: "http://scvideo.sheencity.com/smart/Mars-M-01.mp4", image: "app/assets/img/player-cover.jpg", width: "100%", height: "100%", autostart: "false", controlbar: "bottom", primary: "html5", aspectratio: "10:6", dock: false }); clearInterval(timer); } }, 30); `; document.body.appendChild(oScript1); document.body.appendChild(oScript2);
總結:jwplayer插件可以通過這種方法得到使用,那其它的插件肯定就也是可以的哪,好吧一個新手在這兒自沾自喜。。
終于搞完了,如果哪兒不對頭,或者有其它好方法,請大家一定給我說說。。謝謝哈
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/87107.html
摘要:在引起狀態變化的時刻,框架自動觸發臟檢查,也可以手動執行臟檢查,直接操作更新視圖。最后,說了這么多,大家在具體選型時還是要首先分析自己的需求和現狀,然后再做選擇。 作為一個軟件開發者,最大的挑戰就是在不斷涌現的新技術中進行取舍,持續學習是從事這一行業的必備技能。在這個領域里,技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏,呈現出一派欣欣向榮之景。 在項目中必不可少的便...
摘要:在引起狀態變化的時刻,框架自動觸發臟檢查,也可以手動執行臟檢查,直接操作更新視圖。最后,說了這么多,大家在具體選型時還是要首先分析自己的需求和現狀,然后再做選擇。 作為一個軟件開發者,最大的挑戰就是在不斷涌現的新技術中進行取舍,持續學習是從事這一行業的必備技能。在這個領域里,技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏,呈現出一派欣欣向榮之景。 在項目中必不可少的便...
摘要:在引起狀態變化的時刻,框架自動觸發臟檢查,也可以手動執行臟檢查,直接操作更新視圖。最后,說了這么多,大家在具體選型時還是要首先分析自己的需求和現狀,然后再做選擇。 作為一個軟件開發者,最大的挑戰就是在不斷涌現的新技術中進行取舍,持續學習是從事這一行業的必備技能。在這個領域里,技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏,呈現出一派欣欣向榮之景。 在項目中必不可少的便...
摘要:后端程序配置因為是用自動生成的應用。允許進行跨域訪問的方法,我們這里主要用到的是和兩種方法。現在為止,先設置這些,后面還有具體路由的配置和認證等內容。所以,我一直用這個框架來構建網頁樣式。其中表的與表的設置為外鍵約束。 在上面一章中,我創建了前端的angular4框架程序和后端的nodejs-express框架程序,在這一章中,我準備對前后端程序進行一些簡單的配置,然后將后臺數據庫創建...
閱讀 481·2021-11-22 12:05
閱讀 1542·2021-11-17 09:33
閱讀 3587·2021-11-11 16:54
閱讀 2677·2021-10-14 09:49
閱讀 4052·2021-09-06 15:01
閱讀 1831·2019-08-29 17:23
閱讀 705·2019-08-29 14:09
閱讀 724·2019-08-29 12:28