hugh 的个人博客

vuePress-theme-reco hugh 的个人博客    2021
hugh 的个人博客

Choose mode

  • dark
  • auto
  • light
Home
分类
  • 前端
  • fe-robot
  • 前端监控
标签
专题
  • femonitor
  • jsby
  • fe-robot
TimeLine
工具
全版

hugh 的个人博客

154

Article

320

Tag

Home
分类
  • 前端
  • fe-robot
  • 前端监控
标签
专题
  • femonitor
  • jsby
  • fe-robot
TimeLine
工具
全版
  • 使用video.js播放m3u8格式视频文件

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

vuePress-theme-reco hugh 的个人博客    2021

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


hugh 的个人博客 2020-05-22 20:27:18 videoweb前端m3u8

# 安装video.js

npm install --save-dev video.js
1

# 项目中使用

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

1
2
3
4

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

 <video
            preload
            class="video-js"
            :id="'video-js_' + time"
            controls="controls"
            width="100%"
          >
            <source :src="videoUrl" type="application/x-mpegURL" />
          </video>
1
2
3
4
5
6
7
8
9

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();// 主动播放
      })
1
2
3
4
5
6

# 一些常用的api

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

# 参考链接

videojs videojs-doc