使用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
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
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
2
3
4
5
6
# 一些常用的api
- player.play 用于播放
- player.pause 暂停播放
- 获取player实例
video.players['video-js_id' ] - 销毁video
player.dispose该方法会将dom元素一起移除！