video.js flash HTML5視頻直播插件的使用問題記錄（vue下，cli4）

 

今天又發現一個不錯的視頻播放插件DPlayer，地址https://github.com/MoePlayer/DPlayer，支持彈幕，好像B站用的就是這個，有時間研究一下怎麼使用。看看和Video.js比較哪個更適合。

------------------------------------------------分割線-------------------------------------------------

在版本6以後，video.js 本身不包含flash等插件了，已經分離出來了。使用的時候，需要另行安裝

### 安裝videojs

npm install  video.js --save

### 安裝flash插件

npm install videojs-flash  -S

### 安裝播放HLS的插件

npm  install videojs-contrib-hls --save

 flash插件安裝後，使用的時候自動會從網絡請求獲取video-js.swf文件，但是有時候會下載失敗。所以最好使用本地的

// 引入videojs
import Video from 'video.js';
import 'video.js/dist/video-js.min.css';
// import 'video.js/dist/lang/zh-cn.js';
Vue.prototype.$video = Video; 


import 'videojs-flash'; // 要播放rtmp流, 就必須引入
import 'videojs-contrib-hls' //播放hls

 // 設置flash路徑，Video.js會在不支持html5的瀏覽中使用flash播放視頻文件
//本地引用導入，設置後不在從國外的一個網絡請求video-js.swf這個文件了
 import SWF_URL from 'videojs-swf/dist/video-js.swf'; 
 Video.options.flash.swf = SWF_URL;


//這個不寫，也沒見有什麼影響
const hls = require('videojs-contrib-hls')
Vue.use(hls)

//中文支持，videojs實例options裏需要配置中文支持
/* 不能直接引入js，否則會報錯：videojs is not defined 
import 'video.js/dist/lang/zh-CN.js' */
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import video_en from  'video.js/dist/lang/en.json'
import 'video.js/dist/video-js.css'

Video.addLanguage('zh-CN', video_zhCN);
// Video.addLanguage('en', video_en);

video-js.swf文件的設置，可能會造成解析錯誤，需要進行規則配置，在cli4中需要自己建一個vue.config.js的文件（名字必須是vue.config.js）,裏面配置好對swf文件解析的規則

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    // 設置快捷路徑， @ 表示 'src' ，components 表示 'src/components'
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'));

      //對swf解析的配置
      config.module
      .rule('swf')
      .test(/\.swf$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
          limit: 10000
      });
      
  },
}