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

李文鹏发布于2019-08-21 11:47 / 1589人阅读

摘要：是的，在这种情况下可以好像是可以使用插件了。第四步，重启服务使用经验之插件运用到插件普适法上善若水的博客结果是找不到，报了错。。。

背景：这几天我在使用使用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.js其实没有被引入进来，这个

代码什么事也没干，就想没有它一样。
既然这样不行，我就继续想办法，我就想现在是这个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插件可以通过这种方法得到使用，那其它的插件肯定就也是可以的哪，好吧一个新手在这儿自沾自喜。。
终于搞完了，如果哪儿不对头，或者有其它好方法，请大家一定给我说说。。谢谢哈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87107.html

前端框架这么多，该如何抉择？

摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便...

Jackwoo 2019-08-29 15:37 评论0 收藏0
前端框架这么多，该如何抉择？

摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便...

lemon 2019-08-26 11:59 评论0 收藏0
前端框架这么多，该如何抉择？

摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便...

alphahans 2019-08-02 10:38 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（二）——设置跨域访问和安装基本

摘要：后端程序配置因为是用自动生成的应用。允许进行跨域访问的方法，我们这里主要用到的是和两种方法。现在为止，先设置这些，后面还有具体路由的配置和认证等内容。所以，我一直用这个框架来构建网页样式。其中表的与表的设置为外键约束。在上面一章中，我创建了前端的angular4框架程序和后端的nodejs-express框架程序，在这一章中，我准备对前后端程序进行一些简单的配置，然后将后台数据库创建...

Jokcy 2019-08-26 11:38 评论0 收藏0