下面会先用ckplayer插件进行演示在VUE下的使用。
不管是具体是什么js插件,vue项目也好,angular项目也罢,最终打包都是打包成js压缩文件,资源文件,入口文件(index.html).所以就算你要使用的js插件在源中没有对应的typescripte版本也不要着急,我们依然可以使用它。
1、下载CKPlayer插件
CKPlayer官方下载地址:http://xn--w-8eaaa.ckplayer.com/down/
下载后解压直接放入到static目下
2、放入Vue项目中的static目录下,在入口文件(index.html)中引入js
3、构建ckplayer组件,使用ckplayer插件
ckplayer组件代码如下(按照官方文档写的,解压后index.html中有可自行定义方法进行测试):
<template> <div> <label>ckplayer播放器插件Vue使用Demo</label> <div id="video"></div> </div> </template> <script> export default { name: 'ckplayerPlugin', data () { return { } }, mounted: function(){ // 挂载完成后进行 var videoObject = { container: '#video', //容器的ID或className variable: 'player', //播放函数名称 loaded: 'loadedHandler', //当播放器加载后执行的函数 loop: true, //播放结束是否循环播放 cktrack: 'static/ckplayer/material/srt.srt', //字幕文件 poster: 'static/ckplayer/material/poster.jpg-600', //封面图片 preview: { //预览图片 file: ['static/ckplayer/material/mydream_en1800_1010_01.png-600', 'static/ckplayer/material/mydream_en1800_1010_02.png-600'], scale: 2 }, config: '', //指定配置函数 debug: true, //是否开启调试模式 drag: 'start', //拖动的属性 seek: 0, //默认跳转的时间 //广告部分开始 adfront: 'http://×××w.ckplayer.com/yytf/swf/front001.swf,http: //×××w.ckplayer.com/yytf/swf/front002.swf', //前置广告 adfronttime: '15,15', adfrontlink: '', adpause: 'http://×××w.ckplayer.com/yytf/swf/pause001.swf,http: //×××w.ckplayer.com/yytf/swf/pause002.swf', adpausetime: '5,5', adpauselink: '', adinsert: 'http://×××w.ckplayer.com/yytf/swf/insert001.swf,http: //×××w.ckplayer.com/yytf/swf/insert002.swf', adinserttime: '10,10', adinsertlink: '', inserttime: '10,80', adend: 'http://×××w.ckplayer.com/yytf/swf/end001.swf,http: //×××w.ckplayer.com/yytf/swf/end002.swf', adendtime: '15,15', adendlink: '', //广告部分结束 promptSpot: [ //提示点 { words: '提示点文字01', time: 30 }, { words: '提示点文字02', time: 150 } ], video: [ ['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0], ['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0], ['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10], ['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0] ] }; // 定义一个对象 var player = new ckplayer(videoObject); } } </script> <style scoped> #video { width: 600px; height: 400px; margin: 0px auto; } </style>
5、效果截图
更多web前端知识,请查阅 HTML中文网 !!
以上就是vue.js怎么加载js插件?的详细内容,更多请关注0133技术站其它相关文章!