vue 封装视频播放组件,支持m3u8

现小视频横行时代,原video本身不支持m3u8格式,需要做兼容,使video支持meu8格式的视频播放,现容入并封装成vue组件。

<!-- 视频播放 -->
<template>
    <div class="video_box">
        <video ref="video" preload="none" :poster="myposter" width="100%" height="100%" muted  autoplay controls>
            您的浏览器不支持 video 标签。
            <source :src="videoSrc" type="video/mp4">
            <source :src="videoSrc" type="video/WebM">
            <source :src="videoSrc" type="video/Ogg">
            <source v-if="isM3u8" id="source" :src="videoSrc" type="application/x-mpegURL">
        </video>
    </div>
</template>

<script>

export default {
    name: 'YqVideo',
    props : ["videoSrc","myposter"],
    head () {
        return {
            script :[
                {src:"https://cdn.jsdelivr.net/npm/hls.js@latest"},
            ],
            meta : [
                {name:"referer",content:"no-referrer"}
            ]
        }
    },
    data () {
        return {
            isM3u8 : false
        }
    },
    watch: {
        videoSrc(){
            this.initVideo();
        }
    },
    computed: {},
    mounted() {
        this.initVideo();
    },
    methods: {
        initVideo (){
            const isM3u8 = this.videoSrc.indexOf("m3u8");
            this.isM3u8 = isM3u8 == -1?true:false;
            if(isM3u8 != -1){
                setTimeout(()=>{
                    var video = this.$refs.video;
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(this.videoSrc);
                        hls.attachMedia(video);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            video.play();
                        });
                    }
                },200);
            }
        }
    },
}

</script>
<style lang='less' scoped>
.video_box{
    width: 100%;height: 100%;.pa;top: 0;left: 0;
    video{width: 100%;height: 100%;display: block;object-fit: fill;}
}
</style>

在需要的组件引入使用

import YqVideo from "@/components/utils/YqVideo";

<!-- videoSrc 为视频地址 -->
<yq-video :videoSrc="config.video.company" />

 

来源：CSDN

作者：星辰皮皮瞎

链接：https://blog.csdn.net/weixin_39720860/article/details/103960878