Uniapp H5 播放m3u8、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.安装 MuiPlayer

官方网站：

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

使用 npm 安装：

npm i mui-player --save

使用 yarn 安装：

yarn add mui-player

2.安装支持库

yarn add hls.js
yarn add flv.js

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>

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>

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=