uniapp H5 使用mui-player插件播放hls格式监控视频流

​

1. 安装mui-player

1. npm

npm i mui-player --save

2. yarn

yarn add mui-player

2. 使用

1. 使用JavaScript

<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

或者使用模块管理器引入：

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

如果视频流是hls/flv格式就需要引用flv/hls js包

<script src="js/hls.min.js"></script>
或
import Hls from 'mui-player/hls.min.js'

2. 代码

<template>
    <view>
        <div id="mui-player">
            <!-- <div slot="nextMedia">查看</div> -->
        </div>
        <div class="no-video-url" v-if="!src">视频掉线或暂无视频源</div>
    </view>
</template>
<script>
    import './mui-player/mui-player.min.css'
    import MuiPlayer from './mui-player/mui-player.min.js'
    import Hls from './mui-player/hls.min.js'

    export default {
        name: 'videoH5',
        props: {
            src: { // 视频流
                type: String,
                default: "https://×××××/××××××/openlive/F42808843_11_1.m3u8"
            },
            live: { // 当前视频是否是直播模式
                type: Boolean,
                default: true
            },
            title: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                mp: {}
            }
        },
        mounted() {
            const _this = this;
            console.log(this.src)
            this.mp = new MuiPlayer({
                live: this.live,
                autoplay: true,
                muted: true,
                title: this.title,
                container: '#mui-player',
                src: this.src,
                parse: { // 播放hls/flv的格式需要加，其他格式可以看情况而定
                    type: 'hls',
                    loader: Hls,
                    config: {
                        debug: false,
                    },
                },
                // custom: { // 自定义播放器控件
                //     footerControls: [{
                //         {
                //             slot: 'nextMedia', // 自定义的 slot 值相对应
                //             position: 'right', // 定位显示的位置，可选 left、right
                //             oftenShow: true, // 是否常显示。默认为false
                //             click: function(e) {
                //                 console.log('next media button click...', e)
                //             },
                //             style: {
                //                 color: '#fff',
                //             }
                //         }
                //     ]
                // }
            });
            _this.$nextTick(() => {
                // 标题返回事件
                _this.mp.on('back', (event) => {
                    console.log('event', event)
                    uni.navigateBack()
                });
                // 监听播放器创建
                _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) {
                    _this.refreshURLEvent();
                    console.log('error', event);
                    // 重新加载URL（指定一个视频地址重新加载资源，不传参则默认重新加载）
                    _this.mp.reloadUrl(this.src);
                });
            })
        },
        destroyed() {
            if (this.mp) {
                this.mp.destroy(); // 销毁播放器
            }
        },
    }
</script>

<style>
    .no-video-url {
        position: absolute;
        color: #FFF;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
    }
</style>

以上使用在uniapp H5环境，还有一些具体配置可以自行查看官方文档。
下面链接里有上述中用到的mui-play/hls/flv js文件，如有所需可以直接提取，权限已开。
链接: https://pan.baidu.com/s/10cTWkLqNd0AzJ_m4xBODtQ?pwd=9dsu 提取码: 9dsu ​