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文档
文章来源：https://www.toymoban.com/news/detail-852388.html
5.Demo无效？
Demo无效的话请参上面的提示，执行命令安装。如果这个Demo无法帮到您，请尝试移步Uniapp问答社区或是CSDN解决问题。文章来源地址https://www.toymoban.com/news/detail-852388.html
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=
到了这里，关于Uniapp H5 播放m3u8、flv格式视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
