uni-app集成mui-player

uniapp app端 mui-player使用

2024.03.21 uniapp播放m3u8视频【mui-player插件】拂晓东夕已于 2024-04-17 16:14:04 修改阅读量2.4k 收藏 17点赞数 14文章标签： uni-app 音视频版权uniapp播放m3u8视频uniapp 官方提供了video，对于MP4格式的视频支持，现有需求查看实时视频，m3u8格式的视频流，不支持。网上看了很多插件，在插件市场找到了 mui-player插件，本插件目前免费 感谢作者插件地址https://ext.dcloud.net.cn/plugin?id=16104官方文档https://muiplayer.js.org/zh/guide/使用导入可演示demo，将demo中的node_modules文件夹下的 hls.js文件夹 mui-player文件夹导入自己项目的同级目录下，再在展示视频的地方进行实例化配置即可核心代码<div id="mui-player"></div>import 'mui-player/dist/mui-player.min.css'import Hls from 'hls.js'import MuiPlayer from 'mui-player'data(){ return { videoPlay:null, }}mounted() { this.videoPlay = new MuiPlayer({ container: '#mui-player', title: "标题", src: "http://60.163.137.66:9092/openUrl/cRq7nP2/live.m3u8", // poster: this.poster, width: 300, height: 150, preload:"auto", objectFit: "contain", pageHead: false, showMiniProgress: true, autoFit: false, videoAttribute: [ { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' }, { attrKey: 'playsinline', attrValue: 'playsinline' }, { attrKey: 'x5-video-player-type', attrValue: 'h5-page' } ], parse: { type: 'hls', loader: Hls, config: { debug: false } }, })},// 视频流及时销毁onUnload (){ if(this.videoPlay != null){ this.videoPlay.destroy() }},123456789101112131415161718192021222324252627282930313233343536373839404142434445具体的配置可查看官方文档，APP打包自测。2024-04-10 更改因上述方式适合用于H5，APP不支持，改变实现方式，使用HTML5+ 提供的调用原生控件，打包须勾选相应模块权限initVideo() { // #ifdef APP-PLUS // 创建视频播放控件 // if (!this.player) { this.player = plus.video.createVideoPlayer('mui-player', { src: this.videoUrl, top: '100px', left: '0px', width: '100%', height: '300px', position: 'static' }); const currentWebview = this.$mp.page.$getAppWebview(); currentWebview.append(this.player) this.player.play() // 打开即全屏 this.player.requestFullScreen() // 监听全屏退出事件 this.player.addEventListener("fullscreenchange", (e) => { // if(this.player.isFullScreen()){ // this.player.exitFullScreen() // } if (this.player) { this.player.close() } }) // #endif },