使用Hls.js 依次播放多个视频

一、Npm 安装 hls.js

npm install hls.js -S

1.1 在页面引入hls.js

import Hls from 'hls.js' 

2.创建video标签

代码如下（示例）：

<video
      :ref="video-element" // ref或者id都行
      class="full"
      autoplay  // 添加该属性就算视频自动播放,可去掉或设置关闭
      controls // 展示播放按钮
      muted  //设置视频为静音
    ></video>

    <iframe
      id="video-iframe"
      width="100%"
      height="100%"
      :src="videoUrl" // 播放的视频码流
      class="full"
      allowfullscreen
      frameborder="0"
    >
    </iframe>

---

脚本模块代码

data() {
    return {
      player: null,
      videoUrl : f740f87940424548a3c086d1540805c9.m3u8 // 非真实地址,hls.js 仅支持m3u8码流
    }
  },

        this.player = new Hls() //创建hls实例
          this.player.attachMedia(this.$refs['video-element']) //hls.js 转换码流放入video外壳中
          this.player.on(Hls.Events.MEDIA_ATTACHED, () => { // 加载视频事件
            this.player.loadSource(this.videoUrl)
          })
          {
            let event = Hls.Events.MANIFEST_LOADED
            this.player.on(event, () => { //加载成功事件
              console.log('视频加载完成')
              this.$emit('successLoaded')
            })
          }
          {
            let event = Hls.ErrorTypes.NETWORK_ERROR
            this.player.on(event, () => {
              console.log('网络错误')
            })
          }
          {
            let event = Hls.ErrorTypes.MEDIA_ERROR
            this.player.on(event, () => {
              console.log('媒体错误')
            })
          }
          {
            let event = Hls.Events.ERROR
            this.player.on(event, () => {
              console.log('视频加载失败')
              this.$emit('failLoaded')
            })
          }

最终样式

 

了解更多详细内容Hls.js 使用文檔