Uniapp H5 播放m3u8、flv格式视频_uniapp 播放flv

MuiPlayer UniApp 使用 Demo

简述一下业务需求，仅仅是需要在H5页面播放m3u8格式的视频，但是Uniapp官方提供的video组件在H5端不支持m3u8格式的视频播放，所以需要使用第三方库来播放，这里我使用的是MuiPlayer，但是貌似MuiPlayer的官方文档没有过多提及UniApp的用法，由于MuiPlayer默认支持mp4格式播放，所以我就自己扩展了m3u8格式和flv格式的播放。，所以这里记录一下使用方法，希望对大家有所帮助。

提示一下：代码拉下来需要执行下面两条命令。

Demo Gitee地址 ：

https://gitee.com/xptx/Uniapp-MuiPlayer
1

1.安装 MuiPlayer

官方网站：

https://muiplayer.js.org/zh/
1

使用 npm 安装：

npm i mui-player --save
1

使用 yarn 安装：

yarn add mui-player
1

2.安装支持库

yarn add hls.js
yarn add flv.js
1
2

3.代码实现

index.vue

<template>
	<view>
		<xp-muiplayer :title="title" :src="src" :type="type"></xp-muiplayer>
		<view>
			<text>url:</text>
			<textarea v-model="temp_url"></textarea>
		</view>
		<view>
			<button @click="player">播放</button>
			<button @click="switchType">切换格式 - {{type}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				temp_url: '',
				
				title: '播放视频标题',
				src: '',
				type: 'mp4',
				// m3u8
				// src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
				// mp4
				// src: 'https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4'
			}
		},
		onLoad() {
			
		},
		methods: {
			// 开始播放视频
			player() {
				this.src = this.temp_url
			},
			// 切换播放器格式
			switchType() {
				switch(this.type) {
					case 'mp4':
						this.type = 'm3u8'
						break
					case 'm3u8':
						this.type = 'flv'
						break
					case 'flv':
						this.type = 'mp4'
						break
				}
			}
		}
	}
</script>

<style>

</style>
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

xp-muiplayer.vue

<template>
	<view>
		<div id="mui-video"></div>
	</view>
</template>

<script>
	import 'mui-player/dist/mui-player.min.css'
	import MuiPlayer from 'mui-player'
	import Hls from 'hls.js'
	import Flv from 'flv.js'

	export default {
		name: "xp-muiplayer",
		props: {
			// 播放标题
			title: {
				type: String,
				default: ''
			},
			// 播放地址
			src: {
				type: String,
				default: ''
			},
			// 播放格式
			type: {
				type: String,
				default: 'mp4'
			},
			// 自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
			// 循环播放
			loop: {
				type: Boolean,
				default: true
			},
			// 静音播放
			muted: {
				type: Boolean,
				default: false
			},
			// 播放器容器是否自适应视频高度
			autoFit: {
				type: Boolean,
				default: false
			},
			// 直播模式
			live: {
				type: Boolean,
				default: false
			},
			// 封面地址
			poster: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				mui_video: null,
				parse: {}
			};
		},
		watch: {
			// 播放地址变化
			src(newVal, oldVal) {
				// console.log(newVal, oldVal)
				if (this.mui_video != null) {
					this.mui_video.src = newVal
					this.mui_video.reloadUrl(newVal)
				}
			},
			// 播放格式变化
			type(newVal, oldVal) {
				// console.log(newVal, oldVal)
				
				if(newVal == 'mp4') {
					this.parse = {}
				}
				
				if(newVal == 'm3u8') {
					this.parse = {
						type: 'hls',
						loader: Hls,
						config: {
							 // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
							debug: false,
						},
					}
				}
				
				if(newVal == 'flv') {
					this.parse = {
						type: 'flv',
						loader: Flv,
						config: { 
							// hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
							debug: false,
						},
					}
				}
				// 重置播放器
				this.init()
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.mui_video = new MuiPlayer({
					container: '#mui-video',
					title: this.title,
					// 设置个默认地址 否则会弹出视频为空
					src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
					autoplay: this.autoplay,
					autoFit: this.autoFit,
					loop: this.loop,
					muted: this.muted,
					live: this.live,
					poster: this.poster,
					height: '220px',
					parse: this.parse
				})
			}
		}
	}
</script>

<style>

</style>
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

4.使用

分别是 hls.js 和 flv.js 两种方式，具体请看移步MuiPlayer文档

5.Demo无效？

Demo无效的话请参上面的提示，执行命令安装。如果这个Demo无法帮到您，请尝试移步Uniapp问答社区或是CSDN解决问题。

https://ask.dcloud.net.cn/search/q-bTN1OA==#all

https://so.csdn.net/so/search?spm=1000.2115.3001.4498&q=uniapp%20m3u8&t=&u=
1
2
3