jwplayer html插件,Angular4使用经验之：jwplayer插件运用到angular4插件普适法

背景：这几天我在使用使用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 - 上善若水的博客

可以看到，虽然编译的使用没有报错了，把服务给开起来了，但是在

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标签生效

注意：现在在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插件可以通过这种方法得到使用，那其它的插件肯定就也是可以的哪，好吧一个新手在这儿自沾自喜。。

终于搞完了，如果哪儿不对头，或者有其它好方法，请大家一定给我说说。。谢谢哈