背景:这几天我在使用使用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 - 上善若水的博客
可以看到,虽然编译的使用没有报错了,把服务给开起来了,但是在<div id="player-container"></div>这个标签里面什么都没有,也就是jwplayer.js其实没有被引入进来,这个
<script src="app/assets/lib/jwplayer/jwplayer.js"></script> <script> 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%',autostart: 'false',controlbar: 'bottom',primary: "html5",aspectratio: '10:6',dock: false }); </script>
代码什么事也没干,就想没有它一样。
既然这样不行,我就继续想办法,我就想现在是这个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',height: '100%',dock: false }); clearInterval(timer); } },30); `; document.body.appendChild(oScript1); document.body.appendChild(oScript2);
总结:jwplayer插件可以通过这种方法得到使用,那其它的插件肯定就也是可以的哪,好吧一个新手在这儿自沾自喜。。终于搞完了,如果哪儿不对头,或者有其它好方法,请大家一定给我说说。。谢谢哈
原文链接:https://www.f2er.com/angularjs/146803.html