uniapp播放音乐（uniapp 使用 mui-player 插件播放 m3u8/flv 视频流）

时间2025-04-30 06:00:40分类IT科技浏览7655

导读：背景：uniapp 开发的h5项目，需要播放m3u8/flv后缀的视频，网上有很多视频插件，但是样式和效果不尽如人意，博主最后选择mui-player插件，定制化稍微强一点以及有官方文档可以阅读，官网文档https://muiplayer.js.org/zh/guide/...

背景：uniapp 开发的h5项目，需要播放m3u8/flv后缀的视频，网上有很多视频插件，但是样式和效果不尽如人意，博主最后选择mui-player插件，定制化稍微强一点以及有官方文档可以阅读，官网文档https://muiplayer.js.org/zh/guide/

tips：建议先阅读官方文档，再在页面进行引入

博主最后实现的效果如下，pc端和移动端为两种展示样式，pc可以设置声音、播放速度、分辨率、全屏、画中画等功能，具体还有其他的功能自定义可以参照官网，官网的说明很详细以及有示例进行参考；移动端和pc端的功能大差不差，只是展现形式略有差别。

1 、安装mui-player插件 npm i mui-player --save

2 、页面引入，可选择在需要展示视频的页面直接引入，也可以放入一个公共组件，这样方便多个页面都会使用播放器的情况，博主这里将播放器作为一个公共组件，在组件里面引入

// 播放器样式文件 import mui-player/dist/mui-player.min.css // npm安装方式引入mui-player import MuiPlayer from mui-player // 要播放m3u8的视频就必须要引入hls.js import Hls from hls.js // 要播放flv的视频就必须要引入flv.js import Flv from flv.js // 要设置pc端视频的清晰度需要引入pc端扩展 import MuiPlayerDesktopPlugin from mui-player-desktop-plugin

3 、template模板

4 、data定一个空的mp对象

data() { return { mp: {} } },

5 、需要向使用的页面传递的参数

props: { // 视频流地址，必传 src: { type: String, default: }, // 视频封面图，可选 poster: { type: String, default: }, // 是否要展示关闭视频图标 showCloseIcon: { type: Boolean, default: false }, // 当前视频是否是直播模式 live: { type: Boolean, default: false }, // 兼容音频m3u8（有些音频地址也是m3u8 ，但是音频不需要播放样式，所以需要兼容） isZero: { type: Boolean, default: false }, // 设置pc/移动端清晰度选择 childConfig: { type: Array, default: () => [{ functions: 高清, selected: true }, { functions: 标清 }, { functions: 流畅 }, ] } }

6、mounted生命周期初始化

mounted() { // 防止this的改变 const _this = this; // 根据视频路径后缀判断当前为m3u8还是flv的视频流 var flieArr = _this.src.split(.); var suffix = flieArr[flieArr.length - 1]; // m3u8格式 var a = suffix.indexOf(m3u8) !== -1 // flv格式 var b = suffix.indexOf(flv) !== -1 var c = {} // m3u8格式的视频配置 if (a) { c = { type: hls, loader: Hls, config: { debug: false, } } } // flv格式的视频配置 if (b) { c = { type: flv, loader: Flv, config: { cors: true }, } } // 设置宽高，兼容音频，音频时高度为1 ，必须设置高度，不然音频没发播放，初始化会失败 var sWidth = uni.getSystemInfoSync().screenWidth; // 获取屏幕宽度 var width = 1; if (!_this.isZero) { // 不为音频 if (_this.$util.isMobile()) { // 移动端动态获取 width = sWidth; } else { width = 640; // pc端固定宽度为640 } } var height = 1; if (!_this.isZero) { height = parseInt(width * 9 / 16) // 可改成你想设置的视频的高度，博主这里设置为宽高比为16:9的视频 } _this.mp = new MuiPlayer({ // 指定播放器容器 container: #mui-player, // 视频播放的资源地址 src: _this.src, // 是否自动播放，亲测在ios某些机型上自动播放失效 autoplay: false, // 是否静音播放 muted: false, // 初始化播放器宽度 width: width, // 初始化播放器高度 height: height, // 播放器容器是否自适应视频高度 autoFit: false, // 是否循环播放 loop: false, // 视频封面的资源地址 poster: _this.poster, // 是否开启直播模式，直播模式默认菜单配置不允许控制播放速度以及循环播放 live: _this.live, // 配置声明启用同层播放 videoAttribute: [{ attrKey: webkit-playsinline, attrValue: webkit-playsinline }, { attrKey: playsinline, attrValue: playsinline }, { attrKey: x5-video-player-type, attrValue: h5-page }, ], // flv以及m3u8视频资源的配置 parse: c, // 自定义主题颜色 themeColor: _this.$config.INFO.THEME_COLOR, // 非全屏模式下，是否显示播放器头部操作控件，具体可参考官方文档 pageHead: false, plugins: [ // pc端清晰度设置 new MuiPlayerDesktopPlugin({ customSetting: _this.childConfig.length > 0 ? [{ functions: 清晰度, model: select, show: true, zIndex: 0, childConfig: _this.childConfig, onToggle: function(data, selected) { let onToggleLoad = function(state) { _this.mp.once(ready, function() { let _video = _this.mp.video(); let _execute = function() { _video.currentTime = state .currentTime; state.paused ? _video.pause() : _video.play(); } if (_video.readyState == 0) { _video.addEventListener( durationchange, function(e) { _execute(); }, { once: true }) } else { _execute(); } }) } // 选择清晰度后重载视频 selected(function() { let _video = _this.mp.video(); onToggleLoad({ currentTime: _video.currentTime, paused: _video.paused }); // 将当前选择的清晰度传递给父组件 _this.$emit(onToggleFn, data.functions) }); } }] : [] }) ] }); // 必须放在nextTick里面，等待dom渲染完成再监听视频的播放事件等，视频的其他事件也可在此处进行监听 _this.$nextTick(() => { // 监听播放器已创建完成 _this.mp.on(ready, function(event) { let _video = _this.mp.video(); _video.addEventListener("play",function(e){ //播放事件 _this.$emit(onPlayFn) }); _video.addEventListener("ended",function(e){ //播放完成事件 _this.$emit(onEndedFn) }); }); // 播放发生错误 _this.mp.on(error, function(event) { console.log(error, event); }); }) }

7 、组件销毁，视频播放器也要销毁

destroyed() { this.mp.destroy(); },

8 、可在组件内定义一些播放/暂停的事件供父组件调用（按需写入）

// 关闭视频，返回上一页 videoClose() { uni.navigateBack(); }, // 播放视频 playVideo() { let _video = this.mp.video(); // 获取视频示例 _video.paused ?_video.play(): _video.pause(); // 和原生video事件一致 }, // 暂停视频 pauseVideo(){ let _video = this.mp.video(); _video.pause(); }

9、播放视频组件完整代码，可按需进行增删改

<template> <view id="mui-player"> <image v-if="showCloseIcon" src="@/sub-live/static/close.png" class="pos-a full-close" @click.stop="videoClose"> </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 import MuiPlayerDesktopPlugin from mui-player-desktop-plugin export default { props: { src: { type: String, default: }, poster: { type: String, default: }, showCloseIcon: { type: Boolean, default: false }, live: { type: Boolean, default: false }, // 兼容音频m3u8 isZero: { type: Boolean, default: false }, childConfig: { type: Array, default: () => [{ functions: 高清, selected: true }, { functions: 标清 }, { functions: 流畅 }, ] } }, data() { return { mp: {} } }, watch: { src(newVal, oldVal) { this.mp.reloadUrl(newVal); } }, mounted() { const _this = this; var flieArr = _this.src.split(.); var suffix = flieArr[flieArr.length - 1]; // m3u8格式 var a = suffix.indexOf(m3u8) !== -1 // flv格式 var b = suffix.indexOf(flv) !== -1 var c = {} if (a) { c = { type: hls, loader: Hls, config: { debug: false, } } } if (b) { c = { type: flv, loader: Flv, config: { cors: true }, } } var sWidth = uni.getSystemInfoSync().screenWidth; var width = 1; if (!_this.isZero) { if (_this.$util.isMobile()) { width = sWidth; } else { width = 640; } } var height = 1; if (!_this.isZero) { height = parseInt(width * 9 / 16) } _this.mp = new MuiPlayer({ // 指定播放器容器 container: #mui-player, // 视频播放的资源地址 src: _this.src, autoplay: false, muted: false, width: width, // 初始化播放器高度 height: height, // 播放器容器是否自适应视频高度 autoFit: false, // loop loop: false, // 视频封面的资源地址 poster: _this.poster, // 是否开启直播模式，直播模式默认菜单配置不允许控制播放速度以及循环播放 live: _this.live, // 配置声明启用同层播放 videoAttribute: [{ attrKey: webkit-playsinline, attrValue: webkit-playsinline }, { attrKey: playsinline, attrValue: playsinline }, { attrKey: x5-video-player-type, attrValue: h5-page }, ], parse: c, // 自定义主题颜色 themeColor: _this.$config.INFO.THEME_COLOR, // 非全屏模式下，是否显示播放器头部操作控件 pageHead: false, plugins: [ new MuiPlayerDesktopPlugin({ customSetting: _this.childConfig.length > 0 ? [{ functions: 清晰度, model: select, show: true, zIndex: 0, childConfig: _this.childConfig, onToggle: function(data, selected) { let onToggleLoad = function(state) { _this.mp.once(ready, function() { let _video = _this.mp.video(); let _execute = function() { _video.currentTime = state .currentTime; state.paused ? _video.pause() : _video.play(); } if (_video.readyState == 0) { _video.addEventListener( durationchange, function(e) { _execute(); }, { once: true }) } else { _execute(); } }) } selected(function() { let _video = _this.mp.video(); onToggleLoad({ currentTime: _video.currentTime, paused: _video.paused }); _this.$emit(onToggleFn, data.functions) }); } }] : [] }) ] }); _this.$nextTick(() => { // 监听播放器已创建完成 _this.mp.on(ready, function(event) { let _video = _this.mp.video(); _video.addEventListener("play",function(e){ //播放事件 _this.$emit(onPlayFn) }); _video.addEventListener("ended",function(e){ //播放完成事件 _this.$emit(onEndedFn) }); }); // 播放发生错误 _this.mp.on(error, function(event) { console.log(error, event); }); }) }, destroyed() { console.log(destroyed); this.mp.destroy(); }, methods: { videoClose() { uni.navigateBack(); }, playVideo() { let _video = this.mp.video(); _video.paused ?_video.play(): _video.pause(); }, pauseVideo(){ let _video = this.mp.video(); _video.pause(); } }, } </script> <style lang="scss" scoped> #mui-player{ z-index: 2; } .full-close { top: 22rpx; right: 22rpx; width: 44rpx; height: 44rpx; cursor: pointer; z-index: 8; } </style>

10 、父组件调用播放器，按需进行修改

<common-player ref="muiplayer" :showCloseIcon="true" :poster="liveDetailInfo.thumb" :live="liveDetailInfo.start_time <= nowTime && nowTime <= liveDetailInfo.end_time ? true : false" :src="liveDetailInfo.rewriteVideoUrl" :childConfig="liveDetailInfo.qxdConfig" @onToggleFn="qxdToggle" @onEndedFn="ended" @onPlayFn="playFn"> </common-player>

总结：此播放器还是使用了开源的mui-player ，所以尽量先去看文档，文档写的很详细，只是需要大面积的增删改操作，最后定制为自已想要的样子。