原生视频外挂字幕开启关闭

朱雀 2022-08-31 01:55 157阅读 0赞

第一步：  
定义一个div，定义到字幕要显示的区域

//视频
      <video src="${VideoList.vd_filepath}" id="myvideo" autoplay="true" controls="controls" width="854" height="450"></video>
        /* 字幕div*/
     <div style="cursor: pointer">
                            <i class="fa fa-youtube-play"></i>
                            <span >开启字幕</span>
                        </div>

第二步：  
调取后端接口，获取字幕信息

// 获取字幕信息
    
    var zmList = []
    
    function getZm() { 
        var VideoId = "${VideoId}";
        $.get("<%=basePath %>subtitle/selectSubtitlesById?videoId=${VideoId}", function (res) { 
            res.forEach(item => { 
                var startList = item.vs_start_time.split(':')
                item.startTime = parseInt(startList[0]) * 3600 + parseInt(startList[1]) * 60 + parseInt(startList[2])
    
                var endList = item.vs_end_time.split(':')
                item.endTime = parseInt(endList[0]) * 3600 + parseInt(endList[1]) * 60 + parseInt(endList[2])
            })
    
            zmList = res
            console.log(zmList,'我是数据')
        }, "json");
    
    }
    
    getZm()

第三步：  
监听视频播放时间

//监听视频播放时间 并将对应时间的内容赋值给放字幕内容的div
    var  myVideo = document.getElementById('myvideo')
    myVideo.addEventListener("timeupdate", function () { 
        var nowTime = myVideo.currentTime;
        var msg = zmList.filter((item) => { 
            if (item.startTime < nowTime && item.endTime > nowTime) { 
                return item;
            }
        })
    // 获取字幕内容div
        var zm_el = document.querySelector('.zm_border');
        let zm_content = msg[0] ? msg[0].vs_text : ""
        console.log(zm_content)
        zm_el.innerHTML = zm_content
    }, false);