仿微软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即可改变样式。这一部分也比较简单~

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

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

仿抖音火山视频滑动播放
VideoListDemo 介绍仿抖音火山视频滑动播放 TableView 自动播放项目缘自fork,但fork得仓库代码不忍直视,后来基本连项目名都换了三方库 pod 'ReactiveCo ...
视频编辑器-MovieMator 简洁使用-在时间线上拆分，修剪，连接剪辑
视频编辑器-MovieMator 简洁使用-在时间线上拆分,修剪,连接剪辑分割Split.修剪Trim和合并剪辑Join Clips是基本的视频编辑功能.把一个大的视频分割成几个小的剪辑对于上传.传 ...
20190227最近比较纠结的问题vue的video中视频的播放和nginx-rtmp的推流以及什么时候推流的分析
1.vue中的video的使用(支持MP4) Vue中引入Video.js视频播放器参考:https://www.jianshu.com/p/8b8023c7ed37 Video.js是一个有着HT ...
html5视频添加封面,HTML5 video截取视频封面图片播放代码
使用方法: 1.head引入css部分 .video-con{ width: 300px; height: 150px; position: relative; margin-bottom: 20px ...
HTML5 API详解（13）:video/audio 视频/音频
video的使用方法: <video autoplay="autoplay" controls="controls" width="800&qu ...
酷视网页视频VR播放器SDK（进取版）使用说明书
进取版(mxreality.js)H5视频播放器使用说明: 运行环境: 支持w3c标准且支持webGL 3D渲染引擎的浏览器,包含微信.微博.qq等app等部分主流app <script src ...
仿抖音短视频h5单页版htnl上传即可使用源码文件
仿抖音短视频的模板项目是前后端分离,前端采用uniapp开发,后端目前是用frphp临时搭建的接口,后续为了方便管理内容,会移植到极致cms上.现在也可丢到网站里当一个单页使用,无聊时可以刷一刷短视 ...
微软桌面5.0新增时间线功能
2019独角兽企业重金招聘Python工程师标准>>> 晨,微软召开发布会,正式更新Surface Pro 6 .Surface Laptop 2 以及 Surface Studio ...
仿抖音视频自动播放html,vue 仿抖音视频列表（兼容微信内置X5浏览器）
制作仿抖音视频列表遇到很多坑,特别是安卓微信内置浏览器,让人脑壳疼,核心代码不多便于理解组件用到了vant 中的swiper滑动组件 h5 原生 video 属性 webkit-playsinl ...
【Android 进阶】仿抖音系列之列表播放视频（三）
在上一篇[Android 进阶]仿抖音系列之列表播放视频(二)中,我们实现列表播放视频,这一篇我们来对其做些优化. [Android 进阶]仿抖音系列之翻页上下滑切换视频(一) [Android 进阶 ...

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

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

最新文章

热门文章