位置: IT常识 - 正文

uniapp 使用 mui-player 插件播放 m3u8/flv 视频流(Uniapp 使用mocjk)

编辑：rootadmin

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

推荐整理分享uniapp 使用 mui-player 插件播放 m3u8/flv 视频流(Uniapp 使用mocjk)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp使用教程,uniapp如何使用,uniapp使用muiplayer,uniapp用法,Uniapp 使用mocjk,Uniapp 使用甘特图插件,Uniapp 使用缓存会被修改吗,uniapp使用muiplayer,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

uniapp 使用 mui-player 插件播放 m3u8/flv 视频流(Uniapp 使用mocjk)

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

npm i mui-player --save

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

// 播放器样式文件import 'mui-player/dist/mui-player.min.css'// npm安装方式引入mui-playerimport MuiPlayer from 'mui-player'// 要播放m3u8的视频就必须要引入hls.jsimport Hls from 'hls.js'// 要播放flv的视频就必须要引入flv.jsimport 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') !== -1var 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,// 配置