话题 首页 > javascript教程 > javascript教程话题列表 > 详情

HTML5+JS连续播放分段视频有没有什么解决方案

精华
糯康 2016-10-17 01:56:56 浏览(2807) 回复(4) 赞(0)

视频格式MP4或FLV大约3段,每段15分钟左右。

需求:

  1. 显示出来的是总时间(45分钟左右)

  2. 能够拖动滚动条(自动切到合适的视频段)烦请各位给一个思路
javascript html html5

回答(4)

2016-10-17

给每一段视频一个不显示的 <video> 标签,其 preload 属性设置为 metadata。这样的话不会加载整个视频但是你能获得每个视频的长度。

这样的话通过监听那几个标签的 durationchange 事件,你就知道总时间了。

然后无非就是做一个可以拖动的滚动条;拖动到某个部位之后,算一下处于那段视频中间;把那段视频对应的 <video> 显示出来,并把 currentTime 设置到相应的时间,然后 play()

播放时通过监听 timeupdate 事件来更新进度条的位置。通过监听 ended 事件来获知一段视频已经播放结束,应该加载下一段。

xdsnet 2016-11-21

这样的应用会不会有段切换间的延迟、屏闪?

阿祥 2017-03-23

我现在也有这个需求,请问你之前的是怎么处理的?

1575752446 2017-06-21

我现在也有这个需求,请问您们之前的是怎么处理的?

要回复,请先登录 或者注册
二维码
建议反馈
二维码