h5/video标签借用hls.js播放m3u8格式视频

Qter

blog.csdn.netm0_60432755/article/details/126986065
1.版本

"vue": "2.6.14",
"hls.js": "^1.1.1",
2. 子组件

<template>
    <div class="item-video-box1">
        <video class="player" controls ref='player_big_box'  preload></video>
    </div>
</template>

<script>
let Hls = require('hls.js')
  export default {
    name: "item-video-box1",
    components:{
    },
    props:{
        videourl:{
            type:String,
            default:'ttt'
        }
    },
    data() {
      return {
        item:{}
      }
    },
    watch:{
        // 监听父组件传参替换视频路径
        videourl:{
            immediate: true,
            handler: function (newval) {
                if(newval != 'ttt'){
                    // console.log(newval);
                    const url = newval;
                    setTimeout(() => {
                        this.initVideo(url)
                    }, 1000)
                }
            }
        }
    },
    mounted(){

    },
    methods: {
        // 赋值方法
        initVideo(url){
            this.item.player = new Hls()
            this.item.player.loadSource(url);
            this.item.player.attachMedia(this.$refs.player_big_box)
            this.item.player.on(Hls.Events.MANIFEST_PARSED, () => {
                this.$refs.player_big_box.play()
            })
        }
    },

  }
</script>
<style lang="scss" scoped>
  .item-video-box1{
    width: 100%;
    height: 100%;
    .player{
        width: 100%;
        height: 100%;
    }
  }
</style>
3. 父组件调用

<div class="video-div"  v-for="item in 21">
   <item-video-box videourl="http://******.m3u8"></item-video-box>
</div>
完成。
————————————————
版权声明：本文为CSDN博主「赈早见.琥珀猪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60432755/article/details/126986065