仿微软Video Indexer——视频断点播放与智能解析时间线的前端可视化实现

先放一个实现效果

其中关键词这一部分的功能可以参考之前的博文视频时间点在时间轴上的动态可视化

• 具体的功能参照Microsoft Video Indexer。
• 查看本项目演示点这里。

最核心的就是视频的定点播放和可视化，其他的样式和tab栏都蛮简单的所以这里就不写了。

对于视频的定点播放，用到HTML5中video标签的currentTime这个属性，即在用户点击每个时间点的时候，需要根据函数传入时间参数来改变视频播放时间。

//点击改变视频播放时间
        changeVideoTime (time) {
            var timeSecond = time.split(":");
            var videoTotalTime = 3600*parseInt(timeSecond[0]) + 60*parseInt(timeSecond[1]) + parseInt(timeSecond[2]);
            var thisVideo = document.getElementById("video");
            thisVideo.currentTime = videoTotalTime ;
        },

---

对于可视化，如果只是单一的鼠标悬浮显示时间，使用父级元素hover即可改变样式。这一部分也比较简单~

主要的核心代码部分和算法数据结构都在视频时间点在时间轴上的动态可视化这一篇博文里。如果有什么建议可以留言评论交流~