videojs打点

var VideoPath = ""
//进入详情页加载数据
function loadDetail(callback) {
    let practiceId = getQueryVariable('Id')
    let woundId = getQueryVariable('woundedId')
    //调用接口开始复盘
    StartDebrief(practiceId, woundId, d => {
        GetDebriefAllInfo(practiceId, woundId, (d, url) => {
            //参数数据
            /*  let Parameters = JSON.parse(d.Parameters)*/

            //日志数据
            let Logs = JSON.parse(d.Logs)
            let reLogsData = rebuildLogsData(this.vue1.$data.debriefDetails.logData.logActivities, this.vue1.$data.debriefDetails.logData.showLogData, Logs)
            this.vue1.$data.debriefDetails.logData.logActivities = reLogsData.saveData
            this.vue1.$data.debriefDetails.logData.showLogData = reLogsData.showData
            console.log(this.vue1.$data.debriefDetails.logData.logActivities)
            //评论
            let Remarks = JSON.parse(JSON.stringify(JSON.parse(d.Remarks)))
            //复制一套评论数据
            this.vue1.$data.debriefDetails.allRecommendList = JSON.parse(JSON.stringify(JSON.parse(d.Remarks)))
            //展示数据
            recommendDataShow(Remarks)

            //video播放路径
            VideoPath = url + "RuningVideo" + d.VideoPath
            this.vue1.$data.debriefDetails.videoData.videoPlayPath = VideoPath
            //获取滚动元素
            getRecomsElement()
            callback()
        })
    })
}

//波形初始化
function initLine() {
    var that = this
    loadEcgConfig_Base(d => {
        loadEcgDataSetting_Base(d1 => {
            loadAlertSetting_Base(d2 => {
                loadConfigShow();
                loadConfig();
                GetParameters(d => {
                    that.vue1.$data.ParameterList = d;
                    drawingECGBox();
                    this.vue1.$data.ECGs.Enable = true
                });
            })
        })
    })
}

//处理评论数据
function recommendDataShow(data) {
    for (let recommend of data) {
        //快捷评论
        if (recommend.RemarkType == 0) {
            if (recommend.Content == 'good') {
                let obj = {
                    url: '../images/Debrief/goodIcon.png',
                    title: '您在' + formatSeconds(recommend.Time) + '分给了一个优秀标记',
                    type: 'good',
                    time: recommend.Time
                }
                this.vue1.$data.debriefDetails.recommendList.unshift(obj)
            }
            if (recommend.Content == 'error') {
                let obj = {
                    url: '../images/Debrief/errorIcon.png',
                    title: '您在' + formatSeconds(recommend.Time) + '分给了一个错误标记',
                    type: 'error',
                    time: recommend.Time
                }
                this.vue1.$data.debriefDetails.recommendList.unshift(obj)
            }
            if (recommend.Content == 'warn') {
                let obj = {
                    url: '../images/Debrief/warnIcon.png',
                    title: '您在' + formatSeconds(recommend.Time) + '分给了一个警告标记',
                    type: 'warn',
                    time: recommend.Time
                }
                this.vue1.$data.debriefDetails.recommendList.unshift(obj)
            }

        } else {
            //实时评论
            this.vue1.$data.debriefDetails.showRecommendInputList.push(recommend)
        }
    }
}

//评论滚动元素的获取
function getRecomsElement() {
    //获取滚动盒子dom
    this.vue1.$data.debriefDetails.scrollData.wrapperDomQ = this.vue1.$refs.wrapperRef
    //获取滚动盒子高度
    this.vue1.$data.debriefDetails.scrollData.wrapperHeightQ = this.vue1.$refs.wrapperRef.offsetHeight
    //获取包裹滚动元素的盒子dom
    this.vue1.$data.debriefDetails.scrollData.scrollContentDomQ = this.vue1.$refs.scrollContentRef

    //获取滚动盒子dom
    this.vue1.$data.debriefDetails.scrollData.wrapperDomN = this.vue1.$refs.wrapperRefNow
    //获取滚动盒子高度
    this.vue1.$data.debriefDetails.scrollData.wrapperHeightN = this.vue1.$refs.wrapperRefNow.offsetHeight
    //获取包裹滚动元素的盒子dom
    this.vue1.$data.debriefDetails.scrollData.scrollContentDomN = this.vue1.$refs.scrollContextRefNow
}

const _this = this
//加载视频相关内容
function loadVideo() {
    //视频播放
    //实例化视频对象，配置选项
    var player = videojs('example_video', {
        controls: true,//是否开启视频中的控制按钮
        //配置倍速
        playbackRates: [0.5, 1, 1.5, 2, 2.5],
        //自动播放
        autoplay: false,
        poster: "https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
    });

    //把player对象保存在系统变量中
    _this.vue1.$data.debriefDetails.videoData.videoPlayer = player
    console.log(_this.vue1.$data.debriefDetails.videoData.videoPlayer)
    var ele = $("#example_video").find("video");
    var id = ele[0].id;
    videojs(id).src(this.vue1.$data.debriefDetails.videoData.videoPlayPath);
    //监听video时间
    //视频的实时时间
    //player.currentTime中存放的是当前视频的播放时间,单位是秒
    player.on("timeupdate", () => {
        //保存视频播放的实时时间
        _this.vue1.debriefDetails.videoData.currentTimeVideo = player.currentTime()

    })
    //暂停视频触发事件
    player.on("pause", event => {
        //console.log(player.currentTime())
    })

    //拖动、点击视频进度条触发事件
    player.on("seeked", event => {
        let skipTime = (_this.vue1.debriefDetails.videoData.currentTimeVideo).toFixed(0)
        GetDebriefInfoByTime(practiceId, woundId, skipTime, d => {

        })
    })

    //当前评论数据具体的点的对象
    for (let reco of this.vue1.$data.debriefDetails.allRecommendList) {
        let markerPointObj = {
            time: '',
            text: '评语',
            RemarkType: null,
            Content: "",
        }
        //通过循环找出所有打过标记的点
        markerPointObj.time = reco.Time
        markerPointObj.RemarkType = reco.RemarkType
        markerPointObj.Content = reco.Content
        _this.vue1.$data.debriefDetails.videoData.setSignData.push(markerPointObj)
    }
    //实时发送评语时的标记样式
    let markerStyleObj = {
        'width': '0.81rem',
        'height': '0.81rem',
        'border-radius': '50%',
        'positon': 'absolute',
        'top': '50%;',
        'transform': 'translate(0,45%)',
        'background-color': 'rgba(18,53,85)'
    }
    player.markers({
        //设置标记样式
        markerStyle: markerStyleObj,
        //只要播放到标记的时间间隔就会触发 index是标记的索引
        onMarkerReached: function (marker, index) { },
        //单击标记触发
        onMarkerClick: function (marker, index) { },
        //循环评论数据，把标记打在视频上
        markers: _this.vue1.$data.debriefDetails.videoData.setSignData
    });

    videoWrapper = $(player.el())
    //回放或刷新时设置标记颜色
    //加延时的原因是获取不到marker.key值
    var timer1 = setInterval(() => {
        let cssObj = {
            'positon': 'absolute',
            'top': '-45%;',
            'transform': 'translate(0,45%)',
            'background-color': '',
        }
        _this.vue1.$data.debriefDetails.videoData.setSignData.forEach(marker => {
            if (marker.key != undefined) {
                clearInterval(timer1);
                if (marker.RemarkType == 0) {
                    if (marker.Content == "good") {
                        var markerDiv = videoWrapper.find(".vjs-marker[data-marker-key='" + marker.key + "']")
                        cssObj["background-color"] = "#3CE079"
                        $(markerDiv).css(cssObj)
                    }
                    if (marker.Content == "error") {
                        var markerDiv = videoWrapper.find(".vjs-marker[data-marker-key='" + marker.key + "']")
                        cssObj["background-color"] = "#FF5757"
                        $(markerDiv).css(cssObj)
                    }
                    if (marker.Content == "warn") {
                        var markerDiv = videoWrapper.find(".vjs-marker[data-marker-key='" + marker.key + "']")
                        cssObj["background-color"] = "#FFC152"
                        $(markerDiv).css(cssObj)
                    }
                } else {
                    var markerDiv = videoWrapper.find(".vjs-marker[data-marker-key='" + marker.key + "']")
                    cssObj["background-color"] = "#42F7FF"
                    $(markerDiv).css(cssObj)
                }
            }
        })
    }, 500)

    //从视频中的当前时间转到下一标记，如果没有下一个标记，那么什么都不做
    $("#btn-next").click(function () {
        player.markers.next();
    })

    //从视频中的当前时间转到上一标记，如果没有上一标记，那么什么都不做
    $("#btn-prev").click(function () {
        player.markers.prev();
    })

    //评论
    let practiceId = getQueryVariable('Id')
    let woundId = getQueryVariable('woundedId')
    //实时评语逻辑--------------------------------------
    //返回当前打的标记数组
    var getMarkers = player.markers.getMarkers();
    $("#btn-add").click(function () {
        let obj = {
            time: _this.vue1.$data.debriefDetails.videoData.currentTimeVideo,
            text: ''
        }
        //判断input框是否有内容
        if (_this.vue1.$data.debriefDetails.recommendInputValue != '') {
            _this.vue1.$data.debriefDetails.showRecommendInputList.push({
                Content: _this.vue1.$data.debriefDetails.recommendInputValue
            })
            obj.text = _this.vue1.$data.debriefDetails.videoData.currentTimeVideo

            //调用接口
            AddRemark(practiceId, woundId, _this.vue1.$data.debriefDetails.recommendInputValue, d => { })
            _this.vue1.$nextTick(() => {
                recoScroll('now')
            })
            _this.vue1.$data.debriefDetails.recommendInputValue = ''
            player.markers.add([obj]);
        } else {
            messageTip('error', '不可发送空的评语!')
        }

    })

    //快捷评语逻辑--------------------------------------
    let quickObj = {
        url: '',
        title: '',
        type: '',
        time: '',
        id: uuid()
    }
    //获取设置了滚动的盒子的高度

    //快捷评语-----优秀
    $("#btn-good").click(function () {
        quickObj.url = '../images/Debrief/goodIcon.png'
        quickObj.title = '您在' + formatSeconds(Number(_this.vue1.debriefDetails.videoData.currentTimeVideo).toFixed(0)) + '给了一个优秀标记'
        quickObj.type = 'good'
        quickObj.time = _this.vue1.debriefDetails.videoData.currentTimeVideo
        player.markers.add([quickObj]);

        _this.vue1.$data.debriefDetails.recommendList.push(quickObj)
        AddSimpleRemark(practiceId, woundId, quickObj.type, d => { })
        _this.vue1.$nextTick(() => {
            recoScroll('quick')
        })
        quickObj = {}
    })
    //快捷评语-----错误
    $("#btn-error").click(function () {
        quickObj.url = '../images/Debrief/errorIcon.png'
        quickObj.title = '您在' + formatSeconds(Number(_this.vue1.debriefDetails.videoData.currentTimeVideo).toFixed(0)) + '给了一个错误标记'
        quickObj.type = 'error'
        quickObj.time = _this.vue1.debriefDetails.videoData.currentTimeVideo
        player.markers.add([quickObj]);
        _this.vue1.$data.debriefDetails.recommendList.push(quickObj)
        AddSimpleRemark(practiceId, woundId, quickObj.type, d => { })
        _this.vue1.$nextTick(() => {
            recoScroll('quick')
        })
        quickObj = {}
    })
    //快捷评语-----警告
    $("#btn-warn").click(function () {
        quickObj.url = '../images/Debrief/warnIcon.png'
        quickObj.title = '您在' + formatSeconds(Number(_this.vue1.debriefDetails.videoData.currentTimeVideo).toFixed(0)) + '给了一个警告标记'
        quickObj.type = 'warn'
        quickObj.time = _this.vue1.debriefDetails.videoData.currentTimeVideo
        player.markers.add([quickObj]);
        _this.vue1.$data.debriefDetails.recommendList.push(quickObj)
        AddSimpleRemark(practiceId, woundId, quickObj.type, d => { })
        _this.vue1.$nextTick(() => {
            recoScroll('quick')
        })
        quickObj = {}
    })
}

//评论滚动方法
function recoScroll(type) {
    if (type == 'quick') {
        //获取当前包裹滚动元素的盒子高度
        let scrollContentHeight = this.vue1.$data.debriefDetails.scrollData.scrollContentDomQ.offsetHeight
        //计算滚动区域和滚动容器高度差
        let diff = scrollContentHeight - this.vue1.$data.debriefDetails.scrollData.wrapperHeightQ
        //获取滚动区域高度
        let top = this.vue1.$data.debriefDetails.scrollData.wrapperDomQ.scrollTop
        if (diff - top > -109 || diff - top == -109) {
            this.vue1.$data.debriefDetails.scrollData.wrapperDomQ.scrollTo({
                top: diff + 18,
                left: 0,
                behavior: "smooth",
            });
        }
    } else {
        //获取当前包裹滚动元素的盒子高度
        let scrollContentHeight = this.vue1.$data.debriefDetails.scrollData.scrollContentDomN.offsetHeight
        //计算滚动区域和滚动容器高度差
        let diff = scrollContentHeight - this.vue1.$data.debriefDetails.scrollData.wrapperHeightN
        //获取滚动区域高度
        let top = this.vue1.$data.debriefDetails.scrollData.wrapperDomN.scrollTop
        console.log(scrollContentHeight)
        if (diff - top > -109 || diff - top == -109) {
            this.vue1.$data.debriefDetails.scrollData.wrapperDomN.scrollTo({
                top: diff + 15,
                left: 0,
                behavior: "smooth",
            });
        }
    }
}

//获取快捷评语按钮的动态id 
function getQuickButtonId(item, index) {
    if (index == 0) {
        return "btn-good"
    } else if (index == 1) {
        return "btn-error"
    } else {
        return "btn-warn"
    }
}