视频标记

视频开发分享

流程

• 用户建立课程，建立小节，进入视频制做
• 编辑视频信息，上传视频及封面
• 老师添加视频要点信息，排序，保存要点信息

编辑查看要点信息

用到的库

• 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
• ...