hugh 的个人博客

使用video.js播放m3u8格式视频文件

安装video.js

npm install --save-dev video.js

项目中使用

// 引入js 和css
 import 'video.js/dist/video-js.css'
  import video from 'video.js'

使用video标签播放对应的数据

 <video
            preload
            class="video-js"
            :id="'video-js_' + time"
            controls="controls"
            width="100%"
          >
            <source :src="videoUrl" type="application/x-mpegURL" />
          </video>

id: 使用了time,用来防止重复, 原因:videojs会按id每次生成一个实例, 如果相同的id, 重新初始化会失败,除了使用time的方式,还可以使用player.dispose() 方法(参见下文)

初始化player对象

      this.videoUrl = url
      this.time = new Date().getTime()
      this.$nextTick(() => {
        this.playVideo = video('video-js_' + this.time)
        this.playVideo.play();// 主动播放
      })

一些常用的api

  1. player.play
    用于播放
  2. player.pause
    暂停播放
  3. 获取player实例
    video.players['video-js_id' ]
  4. 销毁video
    player.dispose
    该方法会将dom元素一起移除!

参考链接

videojs
videojs-doc


标题:使用video.js播放m3u8格式视频文件
作者:hugh0524
地址:https://blog.uproject.cn/articles/2020/05/22/1590150438364.html

0 浏览