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

zhangyuge_zhou

已于 2022-09-14 15:41:58 修改

阅读量1.8k

点赞数 1

分类专栏： Hls.js video 文章标签： vue javascript

于 2022-09-14 15:39:20 首次发布

本文链接：https://blog.youkuaiyun.com/zhangyuge_zhou/article/details/126852766

版权

Hls.js 同时被 2 个专栏收录

1 篇文章

订阅专栏

video

1 篇文章

订阅专栏

本文介绍了如何通过Npm安装和使用Hls.js库，在网页中实现m3u8视频流的播放。首先，通过npm安装hls.js，然后在页面上创建video标签，并引入hls.js。接着，创建hls实例并将其与video元素关联，加载视频源。同时，监听Hls.js的加载事件，包括MEDIA_ATTACHED、MANIFEST_LOADED、NETWORK_ERROR、MEDIA_ERROR和ERROR事件，以便处理播放过程中的各种情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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 使用文檔