videojs的坑

videojs

官网地址

坑1：解析m3u8

需调用src()方法设置url和type
例子：

const options = {
     
    controls: true
}
this.player = videojs('id_video', options, () => {
     
	// 重点是这个方法
    this.player.src({
     
        src: detail.playurl,
        type: 'application/x-mpegURL'  // 可不设置
    })
})

type值可不设，可以自动识别，但src（）得调用

坑2：不能重复调用video作用于同一个video，否则报错：

VIDEOJS: WARN: Player “id_video” is already initialised. Options will not be applied.

需调用实例的dispose()方法销毁实例后再创建实例
例如在vue中的destory调用此方法：

destroyed () {
     
    this.player.dispose()
}

坑3：css的导入：需正确导入对应版本的css，否则controls的样式非常难看

import 'video.js/dist/video-js.css'

非工程化的可导入对应版本的css的cdn，可自行查询官网

坑4：播放满屏，播放完退出满屏

上代码：

const options = {
     
    controls: true,
    poster: detail.cover
}
this.player = videojs('id_video', options, () => {
     
    this.player.src({
     
        src: detail.playurl
    })
    // 监听播放
    this.player.on('play', () => {
     
        const isFullscreen = this.player.isFullscreen()  // 检测满屏
        if (!isFullscreen) {
     
            this.player.requestFullscreen()  // 进入满屏事件
        }
    })
    // 监听结束
    this.player.on('ended', () => {
     
        this.player.exitFullScreen()  // 退出满屏事件
    })
})