2024.03.21 uniapp播放m3u8视频【mui-player插件】_muiplayer

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()
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

具体的配置可查看官方文档，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
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28