扫码关注官方订阅号
视频格式MP4或FLV
大约3段,每段15分钟左右。
需求:
1.显示出来的是总时间(45分钟左右) 2.能够拖动滚动条(自动切到合适的视频段)
烦请各位给一个思路
业精于勤,荒于嬉;行成于思,毁于随。
给每一段视频一个不显示的 <video> 标签,其 preload 属性设置为 metadata。这样的话不会加载整个视频但是你能获得每个视频的长度。
<video>
preload
metadata
这样的话通过监听那几个标签的 durationchange 事件,你就知道总时间了。
durationchange
然后无非就是做一个可以拖动的滚动条;拖动到某个部位之后,算一下处于那段视频中间;把那段视频对应的 <video> 显示出来,并把 currentTime 设置到相应的时间,然后 play()。
currentTime
play()
播放时通过监听 timeupdate 事件来更新进度条的位置。通过监听 ended 事件来获知一段视频已经播放结束,应该加载下一段。
timeupdate
ended
比较简单的方法,自己重写进度条以及其他控制按钮。
页面js设置每段的总时长,监听播放进度,结束后动态更改src地址。 拖动:拖动进度条,计算应该播放第几段的第几秒。动态更改src地址加参数?start=开始秒数。需要服务器支持- -#nginx开启flv和mp4的module即可。
请问楼主这个问题解决了没啊?
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
给每一段视频一个不显示的
<video>标签,其preload属性设置为metadata。这样的话不会加载整个视频但是你能获得每个视频的长度。这样的话通过监听那几个标签的
durationchange事件,你就知道总时间了。然后无非就是做一个可以拖动的滚动条;拖动到某个部位之后,算一下处于那段视频中间;把那段视频对应的
<video>显示出来,并把currentTime设置到相应的时间,然后play()。播放时通过监听
timeupdate事件来更新进度条的位置。通过监听ended事件来获知一段视频已经播放结束,应该加载下一段。比较简单的方法,自己重写进度条以及其他控制按钮。
页面js设置每段的总时长,监听播放进度,结束后动态更改src地址。
拖动:拖动进度条,计算应该播放第几段的第几秒。动态更改src地址加参数?start=开始秒数。需要服务器支持- -#nginx开启flv和mp4的module即可。
请问楼主这个问题解决了没啊?