Vue之引用第三方JS插件,CKPlayer使用

前言:html

無論是VUE仍是Angular,有時候咱們須要使用到一些js插件,可是的源庫中並無相應的插件包,這個時候咱們須要如何引入而且使用呢?這個問題其實很是簡單,接下來我以VUE爲例寫給你們介紹一下如何加載第三方js插件。
備註:今天寫這篇文章是在是出於同事的老婆的弟弟的老婆學起了前端vue(關係有點繞),因此問到我這個問題,我就總結一下,其實她問的是vue中如何使用ckplayer插件。因此我會先用ckplayer插件進行演示在VUE下的使用。前端


概述
無論是具體是什麼js插件,vue項目也好,angular項目也罷,最終打包都是打包成js壓縮文件,資源文件,入口文件(index.html).因此就算你要使用的js插件在源中沒有對應的typescripte版本也不要着急,咱們依然可使用它。vue

1.下載CKPlayer插件webpack

CKPlayer官方下載地址
下載後解壓直接放入到static目下web

2.放入Vue項目中的static目錄下,在入口文件(index.html)中引入js
Vue之引用第三方JS插件,CKPlayer使用typescript

Vue之引用第三方JS插件,CKPlayer使用

3.構建ckplayer組件,使用ckplayer插件ide

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.效果截圖oop

Vue之引用第三方JS插件,CKPlayer使用

到這了,ckplayer的引用以及使用方式就完成了。post


擴展
除了上述的直接引入到入口文件的方式,還有什麼其餘的方式嗎?我找了下資料給你們總結以下:

1.絕對路徑引入,全局使用。

在index.html文件中使用script標籤引入插件。
該種方式就是上面演示ckplayer插件使用的方式。
備註:
    這種方式的引用,會在開啓ESLint時,報錯,能夠經過/* eslint-disable*/去掉檢查,可是這樣並不友好,若是使用的地方不少,都得加,那不是很費事嗎。

2.絕對路徑引入,配置externals,Import後使用

在index.html文件中使用script標籤引入插件。
而後在webpack.base文件中找到externals。
使用的地方用Import引入這個插件便可,(根據配置名進行引入)

這種方式就能夠解決第一種方式的ESLint檢查問題。雖然全局引入,可是這依然有一個問題就是使用時須要Import的問題,由於每次都要import也確實很麻煩,哈哈,人都是這樣得寸進尺(懶死了)。

3.webpack配置plugins,無須Import,全局可用

配置webpack的plugins屬性,加入一條插件配置,
而後全局能夠用

備註:這個解決了1,2的問題,而且index.html中也不須要使用script標籤進行引入了,強烈推薦此種方式進行使用。

4.webpack配置alias,Import後使用

這種方式跟第二種方式,很類似。
配置webpack中的alias,建立插件的別名,
而後使用時候須要Import

進一步擴展

這裏是將的VUE,其實Angular也是相同的,因此我就很少寫了,大家能夠自行實驗。

相關文章
相關標籤/搜索