不管是 vue 还是 Angular, 有时候我们需要使用到一些 JS 插件, 但是的源库中并没有相应的插件包, 这个时候我们需要如何引入并且使用呢? 这个问题其实非常简单, 接下来我以 VUE 为例写给大家介绍一下如何加载第三方 JS 插件.
下面会先用 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', // 封面图片
- preview: { // 预览图片
- file: ['static/ckplayer/material/mydream_en1800_1010_01.png',
- 'static/ckplayer/material/mydream_en1800_1010_02.png'],
- 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 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17292.html