firemail

标题: h5/video标签借用hls.js播放m3u8格式视频 [打印本页]

作者: Qter 时间: 2023-1-11 17:16
标题: h5/video标签借用hls.js播放m3u8格式视频
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

欢迎光临 firemail (http://firemail.wang:8088/)