video.js flash HTML5视频直播插件的使用问题记录（vue下，cli4）

在版本6以后，video.js 本身不包含flash等插件了，已经分离出来了。使用的时候，需要另行安装

1
2
3
4
5
6
7
8
9
10
11

### 安装videojs

npm install video.js --save

### 安装flash插件

npm install videojs-flash -S

### 安装播放HLS的插件

npm install videojs-contrib-hls --save

flash插件安装后，使用的时候自动会从网络请求获取video-js.swf文件，但是有时候会下载失败。所以最好使用本地的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 引入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文件解析的规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

},
}