怎么给VIDEO视频标签添加倍速播放功能
默认情况下，VIDEO视频标签播放视频时，它的速度是普通的速度播放。没有快速和慢速播放功能的。那么如何自己给VIDEO视频标签添加倍速播放功能呢？下面学做网站论坛介绍一下制作方法。
先看下效果：
通过视频下方的播放速度选择，就可以改变视频播放速度。
具体实现代码如下：
第一步：先用VIDEO标签写出视频播放界面；
|
1 |
<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap"><span style="color: #009900;"><video <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"vipsp"</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width:100%;"</span> autobuffer controls <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"视频地址.mp4"</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"video/mp4"</span>><<span style="color: #66cc66;">/</span>video></span></div></div> |
第二步：用HTML标签写出播放速度选择框；
|
1 |
<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>p<span style="color: #339933;">></span>选择播放速率：<span style="color: #339933;"><</span>select id<span style="color: #339933;">=</span><span style="color: #0000ff;">"selRate"</span><span style="color: #339933;">></span><br><span style="color: #339933;"><</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">"0.5"</span><span style="color: #339933;">></span><span style="color:#800080;">0.5</span><span style="color: #339933;"></</span>option<span style="color: #339933;">></span><br><span style="color: #339933;"><</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">"1"</span> selected<span style="color: #339933;">></span><span style="color:#800080;">1.0</span><span style="color: #339933;"></</span>option<span style="color: #339933;">></span><br><span style="color: #339933;"><</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">"1.25"</span><span style="color: #339933;">></span><span style="color:#800080;">1.25</span><span style="color: #339933;"></</span>option<span style="color: #339933;">></span><br><span style="color: #339933;"><</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">"1.5"</span><span style="color: #339933;">></span><span style="color:#800080;">1.5</span><span style="color: #339933;"></</span>option<span style="color: #339933;">></span><br><span style="color: #339933;"><</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">"2"</span><span style="color: #339933;">></span><span style="color:#800080;">2.0</span><span style="color: #339933;"></</span>option<span style="color: #339933;">></span><br><span style="color: #339933;"></</span>select<span style="color: #339933;">></</span>p<span style="color: #339933;">></span></div></div> |
第三步：使用JS代码来控制视频播放速度，通过change事件来改变视频的播放速度；
|
1 2 3 4 5 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>script<span style="color: #339933;">></span><br> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span> <span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">"#selRate"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">change</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span> <span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> document.<span style="color: #660066;">querySelector</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'video#vipsp'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">playbackRate</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">val</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> document.<span style="color: #660066;">querySelector</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'video#vipsp'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">play</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #339933;"></</span>script<span style="color: #339933;">></span></div></div> |
这样就可以给自己网站上的视频添加倍速播放功能了，方便用户选择播放速度。
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 怎么给VIDEO视频标签添加倍速播放功能
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 怎么给VIDEO视频标签添加倍速播放功能
