<p><code></p> <p>背景:这几天我在使用使用angular4做项目,由于也是才接触angular和typescript所以遇到不少的问题。这是刚才解决一个的引用外部插件编译出错的问题。<br />问题描述:<br />使用的插件名称:jwplayer.js<br />插件作用:视频播放插件<br /><strong>第一步:使用npm start编译并且开服务</strong><br /><span class="img-wrap"><img data-src="/img/bVQKjH?w=1188&amp;h=638" src="/img/bVQKjH?w=1188&amp;h=638" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span><br /><a href="http://www.js-code.com/tag/angular" title="浏览关于“Angular”的文章" target="_blank" class="tag_link">Angular</a>4使用经验之:jwplayer插件运用到angular4插件普适法 - 877430318 - 上善若水的博客<br />可以看到现在服务以及启动成功,接下来引入jwplayer插件</p> <p><strong>第二步:引入并使用jwplayer插件</strong><br /><span class="img-wrap"><img data-src="/img/bVQKj1?w=1821&amp;h=749" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />Angular4使用经验之:jwplayer插件运用到angular4插件普适法 - 877430318 - 上善若水的博客<br />可以看到现在表示路径不对,我把路径改好,是不是就可以了啦?</p> <p><strong>第三步:修改路径</strong><br /><span class="img-wrap"><img data-src="/img/bVQKkb?w=1729&amp;h=987" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />Angular4使用经验之:jwplayer插件运用到angular4插件普适法 - 877430318 - 上善若水的博客<br />下载看来基本功能是实现了?能够播放视频了吧。是的,在这种情况下可以好像是可以使用插件了。<br />但,如果将 npm start 开的服务器关了,在从新开,看是什么情况。</p> <p><strong>第四步,重启服务</strong><br /><span class="img-wrap"><img data-src="/img/bVQKki?w=984&amp;h=551" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />Angular4使用经验之:jwplayer插件运用到angular4插件普适法 - 877430318 - 上善若水的博客<br />结果是找不到jwplayer,报了错。。。<br /> 既然报了错就想解决办法,一般嘛想,如果在ts中引入出问题,那我直接在html中使用script行吗</p> <p><strong>第五步,在html中使用script引入</strong><br /><span class="img-wrap"><img data-src="/img/bVQKkm?w=1875&amp;h=1028" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />Angular4使用经验之:jwplayer插件运用到angular4插件普适法 - 877430318 - 上善若水的博客<br />可以看到,虽然编译的使用没有报错了,把服务给开起来了,但是在&lt;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> id="player-container"&gt;&lt;/<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt;这个标签里面什么都没有,也就是jwplayer.js其实没有被引入进来,这个</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;app/assets/lib/jwplayer/jwplayer.js&quot;></script><br /> <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: &quot;<a href="http://www.js-code.com/tag/html5" title="html5" target="_blank">html5</a>&quot;, aspectratio: '10:6', dock: false }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"app/assets/lib/jwplayer/jwplayer.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> jwplayer(<span class="hljs-string">'player-container'</span>).setup({ flashplayer: <span class="hljs-string">'app/assets/lib/jwplayer/jwplayer.flash.swf'</span>, file: <span class="hljs-string">'http://scvideo.sheencity.com/smart/Mars-M-01.mp4'</span>, image: <span class="hljs-string">'app/assets/img/player-cover.jpg'</span>, width: <span class="hljs-string">'100%'</span>, autostart: <span class="hljs-string">'false'</span>, controlbar: <span class="hljs-string">'bottom'</span>, primary: <span class="hljs-string">"<a href="http://www.js-code.com/tag/html5" title="浏览关于“html5”的文章" target="_blank" class="tag_link">html5</a>"</span>, aspectratio: <span class="hljs-string">'10:6'</span>, dock: <span class="hljs-literal">false</span> }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>代码什么事也没干,就想没有它一样。<br />既然这样不行,我就继续想办法,我就想现在是这个script标签没有效果,如果它生效那是不是这个播放插件就可以用了?</p> <p><strong>第六步:让script标签生效</strong><br /><span class="img-wrap"><img data-src="/img/bVQKkF?w=1910&amp;h=1013" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><em>注意:现在在jwplayer.js中的路径'jwplayer.html5.js',我又把它改回来了</em>,不然路径又不对头了。总之就是这样就是对的了,不用去改jwplayer原生代码。<br />而且重启服务也可以的。。。<br />关键代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/** * 使用计时器,解决插件使用问题 */ var oScript1 = document.createElement(&quot;script&quot;), oScript2 = document.createElement(&quot;script&quot;); oScript1.src = &quot;app/assets/lib/jwplayer/jwplayer.js&quot;; 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: &quot;html5&quot;, aspectratio: '10:6', dock: false }); clearInterval(timer); } }, 30); `; document.body.appendChild(oScript1); document.body.appendChild(oScript2);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs dart"><code><span class="hljs-comment"><span class="markdown">/** <span class="hljs-bullet">* </span>使用计时器,解决插件使用问题 */</span></span> <span class="hljs-keyword">var</span> oScript1 = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"script"</span>), oScript2 = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"script"</span>); oScript1.src = <span class="hljs-string">"app/assets/lib/jwplayer/jwplayer.js"</span>; oScript2.inner<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> = ` <span class="hljs-keyword">var</span> timer = setInterval(function() { <span class="hljs-keyword">if</span>(<span class="hljs-built_in">window</span>.jwplayer) { <span class="hljs-comment"><span class="markdown">/** <span class="hljs-code"> * 首页视屏播放</span> <span class="hljs-code"> */</span></span></span> <span class="hljs-keyword">var</span> player = jwplayer(<span class="hljs-string">'player-container'</span>).setup({ flashplayer: <span class="hljs-string">'app/assets/lib/jwplayer/jwplayer.flash.swf'</span>, file: <span class="hljs-string">'http://scvideo.sheencity.com/smart/Mars-M-01.mp4'</span>, image: <span class="hljs-string">'app/assets/img/player-cover.jpg'</span>, width: <span class="hljs-string">'100%'</span>, height: <span class="hljs-string">'100%'</span>, autostart: <span class="hljs-string">'false'</span>, controlbar: <span class="hljs-string">'bottom'</span>, primary: <span class="hljs-string">"html5"</span>, aspectratio: <span class="hljs-string">'10:6'</span>, dock: <span class="hljs-keyword">false</span> }); clearInterval(timer); } }, <span class="hljs-number">30</span>); `; <span class="hljs-built_in">document</span>.body.appendChild(oScript1); <span class="hljs-built_in">document</span>.body.appendChild(oScript2);</code></pre> <p>总结:jwplayer插件可以通过这种方法得到使用,那其它的插件肯定就也是可以的哪,好吧一个新手在这儿自沾自喜。。<br />终于搞完了,如果哪儿不对头,或者有其它好方法,请大家一定给我说说。。谢谢哈</p> <p></code></p>

本文固定链接: http://www.js-code.com/angularjs/angularjs_28338.html