uniapp 播放直播流 m3u8 视频

安装

npm install hls.js -S

代码

<template>
    <view class="vid">
        <view class="navv">
            <u-navbar autoBack leftText="返回" :title="title" height="88rpx">
            </u-navbar>
        </view>
        <view class="con">
            <!-- <video :src="videos" controls="true"></video> -->
            <video controls class="video" ref="video"></video>
        </view>

    </view>
</template>

<script>
    import store from '@/store/index.js'; //需要引入store
    import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup';


    let Hls = require('hls.js');


    export default {
        components: {
            uniPopup,
            Hls,
        },

        data() {
            return {
         
                hls: null,
                dp: {},
 
            }
        },

        computed: {
     
        },
        mounted() {
            this.getStream('http://yzbplay.79524795.vip/live/asd.m3u8')
        },

        methods: {
         

            //播放流 开始
            getStream(source) {
                // debugger
                if (Hls.isSupported()) {
                    this.hls = new Hls();
                    this.hls.loadSource(source);
                    this.hls.attachMedia(this.$refs.video);

                    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                        console.log("加载成功");
                        this.$refs.video.play();
                    });
                    this.hls.on(Hls.Events.ERROR, (event, data) => {
                        // console.log(event, data);
                        // 监听出错事件
                        console.log("加载失败");
                    });
                } else if (this.$refs.video.canPlayType('application/vnd.apple.mpegurl')) {
                    // console.log()
                    this.$refs.video.src = 'http://yzbplay.79524795.vip/live/asd.m3u8';
                    this.$refs.video.addEventListener('loadedmetadata', function() {
                        this.$refs.video.play();
                    });
                }
            },
            // 停止流
            videoPause() {
                if (this.hls) {
                    this.$refs.video.pause();
                    this.hls.destroy();
                    this.hls = null;
                }
            },
            //播放流 结束

 
    }
</script>

<style lang="scss">
    .zoushi {
        background: #fff;
    }

    .title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0 20px 0;
    }

    .ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 0 auto;
        width: 98%;
        margin: 0 auto;
    }

    .ul .li {
        outline: 1px solid #ccc;
        width: 10%;
        height: 40px;
        font-size: 13px;
        position: relative;

        /* margin-top: -1px; */
        .black {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .red {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #b40000;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .default {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .hudong {
        background: #fff;
        padding: 0 20px 20px;
        overflow: hidden;
    }

    .time {
        text-align: center;
        padding: 30px 0;
        font-weight: bold;
    }

    .box {
        display: flex;
        justify-content: space-between;

        >view {
            flex: 1;
            background-color: #efefef;
            box-shadow: 0 0 5px #b8b8b8;
            height: 90px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 13px;

            &.hong {
                margin-right: 20px;
                background: #b40000;
                color: #fff;
            }

            &.hei {
                background: #000;
                color: #fff;
            }

            .hongq {
                margin-top: 5px;
            }
        }
    }


    .gui-text-small {
        margin-top: 24rpx;
        float: left;
        width: 19%;
        height: 0.5cm;
    }

    .jjj {
        background-color: white;
        display: flex;
        margin-top: 24rpx;
        font-size: 30rpx;
        box-sizing: border-box;
        padding: 5rpx 10rpx 1rpx 26rpx;
    }

    .jjj view:nth-of-type(2) {
        flex: 1;
    }

    .uni-input-input {
        margin-left: 100rpx;
    }




    .vid {
        margin-top: var(--status-bar-height);
    }

    .con {
        margin-top: 90rpx;
    }

    .con video {
        width: 100%;
        background-color: palegoldenrod;
    }

    .jj {
        background-color: white;
        display: flex;
        margin-top: 24rpx;
        font-size: 28rpx;
        box-sizing: border-box;
        padding: 30rpx 26rpx;
    }

    .jj view:nth-of-type(2) {
        flex: 1;
    }

    .vid .btn {
        margin-top: 24rpx;
        background-color: white;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 28rpx;
        text-align: center;
    }
</style>