背景:这几天我在使用使用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插件可以通过这种方法得到使用,那其它的插件肯定就也是可以的哪,好吧一个新手在这儿自沾自喜。。

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

jwplayer html插件,Angular4使用经验之:jwplayer插件运用到angular4插件普适法相关推荐

  1. 插件制作教程 php,typecho插件编写教程(二):写一个新插件

    第一节我们了解了一个插件的基本构成,下面我们需要一个实例练习巩固. 真赶巧,老高最近正在改版百度sitemap提交插件for typecho,下面和老高一起改版吧! 准备 不知道大家用过WP版的百度结 ...

  2. kubelet配置cni插件_从零开始入门 K8s | 理解 CNI 和 CNI 插件

    原标题:从零开始入门 K8s | 理解 CNI 和 CNI 插件 作者 | 溪恒 阿里巴巴高级技术专家 本文整理自<CNCF x Alibaba 云原生技术公开课>第 26 讲,点击直达课 ...

  3. 【Android 插件化】VAHunt 引入 | VAHunt 原理 | VAHunt 识别插件化引擎

    文章目录 一.VAHunt 引入 二.VAHunt 原理 三.识别插件化引擎 一.VAHunt 引入 从应用开发者角度出发 , 保护自己开发的应用不被恶意开发者使用插件化虚拟引擎二次打包 , 并植入恶 ...

  4. 【Flutter】插件包选择 ( 查看文档是否全面 | 查看插件包的更新版本次数 | 查看使用示例 | 查看 GitHub 项目的 Star Fork Issues )

    文章目录 一.插件包选择 二.查看文档是否全面 三.查看插件的更新版本次数 四.查看使用示例 五.查看 GitHub 项目的 Star Fork Issues 一.插件包选择 开发 Flutter 时 ...

  5. 微信小程序点播插件_小程序云直播amp;云点播插件限时降价了!!!

    普惠音视频开发者 小程序·云直播&云点播插件降价啦! 买200TB流量包免1年插件授权费用 小程序直播插件流量费支持资源包抵扣 点播插件免收播放次数费用 限时降价 买赠活动时间:2020年10 ...

  6. idea lombok插件安装_mac安装的软件和idea的插件推荐

    工欲善其事必先利其器,今天简单分享一下我的武器库. 主要包括两个方面,idea的插件:还有mac的常用软件推荐. 希望可以在编码之余,提高自己的工作效率. idea插件 翻看了宇宙条上各种推荐的插件, ...

  7. pr抖动插件_2020最全的8000多款PR插件合集,一键安装

    在视频剪辑中,插件很大程度的帮我们解决了一些繁琐的操作流程,让我们的工作变得简单快 捷!但是插件种类那么多.一个个安装插件是很麻烦的! 今天分享给大家,[领取方式见文章末尾] 今天给大家带来了2020 ...

  8. 写JQuery 插件 什么?你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  9. html中表单的校验的插件,功能强大的jquery.validate表单验证插件

    本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...

  10. flstudio插件找不到_【干货】音频插件完全指引手册

    本文适合于音乐制作初学者.和有一定经验但仍希望查漏补缺的音乐人朋友们.希望通过本文,帮助大家全面.系统.通俗易懂地了解音频插件,并知道如何选择. 什么是音频插件 随着时代进步,现代音乐制作已广泛采用P ...

最新文章

  1. 习题7-1 选择法排序 (20 分)
  2. Django-form组件
  3. 黑马lavarel教程---11、响应处理
  4. bzoj 3357 [Usaco2004]等差数列 dp
  5. java 异常 抛 效率_一文带你理清Java异常体系,提高开发效率
  6. 如何用短信完成XSS?
  7. springboot mysql事物_SpringBoot事务详细简介
  8. Gram-Schmidt正交化
  9. Millumin 3 for mac使用教程-创建一个简单的视频映射
  10. VS2005 SP1 “无法使用此产品的安装源,请确认安装源存在,并且您可以访问它”的错误...
  11. jaxws-ri下载链接
  12. 合工大计算机与信息学院保研,合肥工业大学计算机与信息学院(专业学位)计算机技术保研细则...
  13. 二十五.决策树之CART决策树的原理和sklearn实现
  14. 交流电机Clark变换中的功率不变约束与幅值不变约束
  15. OpenGL项目配置GLFW及GLAD
  16. 为什么学小易显示服务器开小差,学小易搜题APP
  17. 小米一体化微水滴形态转轴,揭露小米MIX Fold 2的轻薄秘密
  18. C++,Linux架构师成长之路
  19. 音视频SDK包-远程网络视频会议-在线远程教育-屏幕共享-电子白板-影音共享-在线直播等等都可以用
  20. 领导合影站位图_领导座次安排图,没有人会教你这些,但非常重要!(建议收藏)...

热门文章

  1. 使用讯飞tts实现安卓语音中文合成播报
  2. 打包Hololens2 VS error MSB3774: 找不到 SDK“WindowsMobile, Version=10.0.19041.0”解决办法
  3. 如何打开linux字符界面,Linux字符界面转图形界面
  4. linux中bash命令是什么,linux中bash是什么意思?
  5. scratch-www 在Win10下的环境配置
  6. 传说中的三核浏览器:Lunascape
  7. TrustedInstaller权限的问题
  8. kindle型号查询
  9. xp计算机管理命令,XP系统运行命令在哪打开
  10. 【图算法】(3) 网络的基本静态几何特征(二),附networkx完整代码