uni-app + mui-player & vue + mui-player 播放flv文件

uni-app:
先在项目的根路径下打开终端，安装mui-player：

npm install mui-player --save
1

再安装个flv.js依赖：

npm install flv.js --save
1

然后再到main.js中引入：

import "mui-player/dist/mui-player.min.css";
import muiPlayer from 'mui-player';
1
2

再页面上创建元素，并定义id：

1

然后再创建muiPlayer播放器：

// 特别注意：在uni-app中不是文档上面的new muiPlayer，而是new muiPlayerMin，不然会undefined
initPlayer(){
	var mp = new muiPlayerMin({
		container: '#mui-player',
		title: '标题',
		autoplay: true, // 自动播放，部分浏览器不支持，比如谷歌，需要用户与页面交互才可以播放
		src: 'https://XXXXXXXXXXXXXXX', // 视频播放地址
		parse: {
			type: 'flv',
			loader: FlvJs,
			config: {
				cors: true // 允许跨域
			}
		}
	})
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后调用即可：

mounted(){
	this.initPlayer()
}
1
2
3

vue的：
先在项目的根路径下打开终端，安装mui-player：

npm install mui-player --save
1

再安装个flv.js依赖：

npm install flv.js --save
1

然后再到main.js中引入：

import "mui-player/dist/mui-player.min.css";
1

其它都差不多，直接上代码

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
30
31
32
33