零基础学做网站培训介绍

当前位置:

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

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

先看下效果:

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

通过视频下方的播放速度选择,就可以改变视频播放速度。

具体实现代码如下:

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


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

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


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

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


<script>
$(function () {
$("#selRate").change(function () {
document.querySelector('video#vipsp').playbackRate = $(this).val();
document.querySelector('video#vipsp').play();
});
});
</script>

这样就可以给自己网站上的视频添加倍速播放功能了,方便用户选择播放速度。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 什么是CSS3 盒布局在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并
  • 对于一些网络小白想建立一个网站,最方便的方法就是通过开源CMS程序来建网站。省去了复杂的编程过程,准备一些建网站所需要的条件后就可以自己建立一
  • 我们注意到,很多的网站都有WEB分享按钮,可以一键分享到很多的网站平台,如:分享到微博、微信、人人网等等。以前我们做这种WEB分享按钮使用的是百
  • 现在常用的邮箱有163邮箱、QQ邮箱。它们的特点就是邮箱后缀是各自网站的域名。如admin@163.com,admin@qq.com。下面学做网站论坛给大家介绍一下如何将
  • 我们知道,网站CDN加速可以有效的提升网站打开速度,降低网站服务器的负担。但是如果你网站同步了百度小程序,使用CDN加速就会出现一些意想不到的问题
  • 现在很多企业网站都安装了百度商桥,由于现在百度商桥只限百度推广用户使用,否则就需要收费了。那么我们也可自己制作一下类似百度商桥的网站在线留言
  • 公司建网站现在特别普遍了,很多公司都有自己的网站。至于公司建网站多少钱,企业网站制作价格要根据具体企业网站的要求不同而不同。下面学做网站论坛
  • 我们制作网站后,如果网站上需要支付功能的话,就需要给我们的网站对接微信支付功能。方便用户在我们网站上直接支付,这在学做网站论坛的建站培训课程
  • 如果我们想做一个视频网站,并且需要自动连续播放视频的话,可以使用jQuery代码来控制实现连续播放多个视频。通过new个video,指定播放列表的第一个视
  • 有些站长经常抱怨自己的网站打开速度很慢,用了各种方法都不起效果。也找不到影响网站打开慢的真正原因。对于我们学做网站论坛检测的一部分网站中,有