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
      });
      
  },
}