視頻標記

視頻開發分享

流程

• 用戶建立課程，建立小節，進入視頻製做
• 編輯視頻信息，上傳視頻及封面
• 老師添加視頻要點信息，排序，保存要點信息

編輯查看要點信息

用到的庫

• video.js
• videojs-markers

videojs-markers

初始化配置

• 獲取video數據
• 初始化video
• 要點信息初始化配置

const arr = videoData.map((item: any) => {
            return {
                time: item.time,
                text: item.title
            }
        })
this.player = Video('myvideo', {
            controls: true, // 必填，顯示各控制組件測試
            autoplay: false, // 是否自動播放
            preload: 'auto', // 預加載
            poster: this.videoData.content.cover, // 視頻封面
            loop: false, // 是否循環播放
            fluid: true,

            playbackRates: [0.5, 0.75, 1.25 , 1, 1.5, 2], // 是否顯示倍速
            controlBar: {
                volumePanel: {
                    inline: false // 將音量橫向改成縱向
                }
            },
        })
        this.player.on('loadeddata', () => {
            this.showVideo = true
        })
        this.player.src({
            src: url,
            type: 'video/mp4'
        })
        this.player.markers({
            markerTip: {
                display: true,
                text: (marker: any) => {
                    return  marker.text
                },
                time: (marker: any) => {
                    return marker.time
                }
            },
            breakOverlay: {
                display: false,
                displayTime: 3,
                style: {
                    'width': '100%',
                    'height': '20%',
                    'background-color': 'red',
                    'color': 'white',
                    'font-size': '17px'
                },
                text: (marker: any) => {
                    return 'Break overlay: ' + marker.overlayText
                }
            },
            markerStyle: {
                // 標記樣式
                'width': '0.7em',
                'height': '0.7em',
                'bottom': '-0.2em',
                'border-radius': '50%',
                'background-color': '#5584FF',
                'z-index': '100',
                'position': 'absolute'
            },
            onMarkerClick: (marker: any) => {
                return true
                // return false 
            },
            markers: arr
        })
複製代碼

效果圖

同步視頻播放

• 經過websocket，當老師播放或暫停時，同步視頻播放進度
• 老師端

video..addEventListener('play', () => {
                console.log('監聽到播放----')
                const videoData = {
                    play: true,
                    time: myVideo.currentTime
                }
                this.$emit('play', videoData)
            }, false)
<VideoPlayer v-if="showElement('video')" :from="'teacher'" :key="currentVideo" :videoData="videoData" :videoUrl="videoUrl" @play="videoChangeState" />
private videoChangeState(videoData: any) {
    this.handleChangeVideo(videoData)
}
public handleChangeVideo(videoData: any) {
    const video: IChannelData = {
        action: 'video',
        data: {
            videoData
        }
    }
    this.channelCanvas.emiter.publish(video)
}
複製代碼

• 學生端

(data){
if (data.action === 'video') {
                if (this.$refs.videoPanel) {
                    const video = this.$refs.videoPanel as any
                    video.videoChagestate(data.data.videoData)
                }
            }
}
private videoChagestate (videoData: any) {
            video.currentTime = videoData.time
                myVideo.play()
    }
複製代碼

開發中可能遇到的問題

• DOMException: play() failed because the user didn't interact with the document first

報錯緣由是chrome新特性，內容大體意思是開發者不能利用手中權限去給用戶形成噪音干擾，首次加載頁面須要用戶和audio/video進行交互, 使用muted能夠解決

• 獲取視頻信息時要在視頻加載完後獲取，loadeddata（第一幀）event

this.player.on('loadeddata', () => {
            ...
        })
複製代碼

• 有不少上下切換的組件，及時銷燬video
• 在獲取完url後在初始化video
• ...