JQuery/PHP

怎么给VIDEO视频标签添加倍速播放功能

阿里云

默认情况下,VIDEO 视频标签播放视频时,它的速度是普通的速度播放。没有快速和慢速播放功能的。那么如何自己给 VIDEO 视频标签添加倍速播放功能呢?下面介绍一下制作方法。

先看下效果:

通过视频下方的播放速度选择,就可以改变视频播放速度。具体实现代码如下:

也想出现在这里?联系我们
创客主机

第一步:先用 VIDEO 标签写出视频播放界面:

  1. <video id="vipsp" style="width:100%;" autobuffer controls src="视频地址.mp4" type="video/mp4"></video>

第二步:用 HTML 标签写出播放速度选择框:

  1. <p>选择播放速率:<select id="selRate">
  2. <option value="0.5">0.5</option>
  3. <option value="1" selected>1.0</option>
  4. <option value="1.25">1.25</option>
  5. <option value="1.5">1.5</option>
  6. <option value="2">2.0</option>
  7. </select></p>

第三步:使用 JS 来控制视频播放速度,通过 change 事件来改变视频的播放速度:

  1. <script>
  2. $(function () {
  3. $("#selRate").change(function () {
  4. document.querySelector('video#vipsp').playbackRate = $(this).val();
  5. document.querySelector('video#vipsp').play();
  6. });
  7. });
  8. </script>

怎么给 VIDEO 视频标签添加倍速播放功能

已有 256 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!