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()  // 退出滿屏事件
    })
})