阿酷TONY 2021-3-24

1. 倍速播放功能可以让视频加速或者减速播放；
2. 在PC端，HTML5播放器能轻松实现倍速播放功能，您可以将视频的播放速度设定为0.5倍，1倍（正常速），1.2倍，1.5倍，2倍。移动端要使用倍速功能，则是通过集成SDK来实现；
3. H5播放器的使用方法有两种，第一种，是直接通过一段JS代码实现；第二种是通过在点播后台，视频设置里直接勾选优先使用H5播放器，然后使用多终端代码；
4. 目前H5播放器需要IE11或以上的浏览器才能完美兼容。

截图效果：

图1-1：倍速播放效果

图1-2：倍速播放效果

代码范例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>

演示地址：

http://www.cuplayer.com/cloud/demo.html?f=link-adv-20191211

相关倍速实现的源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿酷TONY</title>
</head>
<body>
<div style="text-align:center"><button onclick="playPause()">播放/暂停</button><button onclick="makeBig()">放大</button><button onclick="makeSmall()">缩小</button><button onclick="makeNormal()">普通</button><button onclick="getPlaySpeed()" type="button">播放速度是多少？</button><button onclick="setPlaySpeed()" type="button">将视频设置为以快速播放</button><br><video id="video" width="420" autoplay controls><source src="test.mp4" type="video/mp4">TONY提示：您浏览器不支持 HTML5 video 标签。 </video>
</div>
<script>
var myVideo=document.getElementById("video");
function getPlaySpeed() {alert(myVideo.playbackRate);//获取播放速度}
function setPlaySpeed()  { myVideo.playbackRate=2;//设定新的播放速度2倍速度}
function playPause(){ if (myVideo.paused) myVideo.play(); //播放else myVideo.pause(); //暂停播放}
function makeBig(){ myVideo.width=660; }
function makeSmall(){ myVideo.width=230; }
function makeNormal(){ myVideo.width=400; }
</script>
</body>
</html>

我的视频应用类原创文章：

微信公众号直播有哪些不一样的玩法？
微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
说说视频编码格式、视频码率、视频帧率、分辨率的概念
原创教程：带ppt课件和讲师画面的教学视频录制完整教程
如何做电视节目的视频直播（电视台节目直播）
做视频直播时如何测试本地网络的上行带宽(网速测试)
usb摄像头做教学直播实现pc和手机都可以在线观看教程
微信公众号直播有哪些不一样的玩法？
酷播云免费视频二维码的完整使用教程（适合小企业做微信视频宣传）
视频二维码的适用场景
微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
说说视频编码格式、视频码率、视频帧率、分辨率的概念
原创教程：带ppt课件和讲师画面的教学视频录制完整教程
如何做电视节目的视频直播（电视台节目直播）
做视频直播时如何测试本地网络的上行带宽(网速测试)
usb摄像头做教学直播实现pc和手机都可以在线观看教程
微信公众号直播有哪些不一样的玩法？
如何做电脑游戏桌面录屏直播实现手机直接观看
免费视频存储平台（微云、百度网盘、谷歌硬盘、酷播云）的截图对比
云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
基于微信小程序做直播的截图（微信小程序发起视频直播）
在线教学场景下讲师们做PPT课件直播的一些介绍
FMS/wowza/red5/SRS流媒体服务器产品对比

html5播放器视频倍速播放功能相关推荐

html5视频倍速播放功能
h5视频倍速播放功能(视频多倍速观看功能的实例) 写倍速播放器代码的原理,采用的是video的playbackRate属性 ( playbackRate 属性设置或返回音频/视频的当前播放速度). 主 ...
网页播放器自定义倍速播放
网页播放器自定义倍速播放,可设置播放器的播放速度为1,2,3,5,6,7等自定义播放速度.利用html5的特性进行处理. 一般网页播放器的速度限制在最高两倍速播放,通常这就符合一般的要求了.但是确实有 ...
Ubuntu16.04下使用VLC media player播放器实现倍速播放
Ubuntu16.04下使用VLC media player播放器实现倍速播放打开软件开启倍速功能打开软件视频文件右键"属性"-"打开方式"-" ...
超级简单的工具——Video Speed Controller，玩转百度云，轻松解锁百度云视频倍速播放功能！
有经常使用百度云盘看视频需求的小伙伴肯定清楚百度的niao性,如果我们不是人民币玩家,咱就不配享用人家的在线视频倍速播放功能.Emm- 今天给大家分享一个十分简单的工具--Video Speed Co ...
如何使用win10自带的播放器ACG倍速播放
win10自带ACG播放器的功能并不是很友好.下面给大家讲讲[如何使用win10自带的播放器ACG倍速播放] 首先将[设置]改成如下图: 紧接着回到播放界面,就能看见[倍速]小人按钮啦:
电脑b站html加速播放,b站投稿如何提高播放速度?如何2倍速?b站播放器选择倍速快捷方式...
在b站看视频的时,有时候我们需要调节视频的播放速度,当然,设置方式和是多种多样的,目前较为便捷的方式就是选择通过html5播放,然后直接设置html5的播放速度就可以设置视频的播放速度了,那么我们该如 ...
Html5视频加密/html5播放器视频加密应用实例
说说html5的视频加密,HTML5因无需插件可跨平台使用.开发免费.对搜索引擎友好等,深受广大开发者的喜爱,成为主流播放器的发展趋势. 市面上常见的H5加密,采用标准的Apple HLS Encry ...
电脑自带播放器怎么倍速播放视频
1.选择视频文件,鼠标右击在打开方式中选择Windows Media Player播放器打开视频 2. 在Windows Media Player视频播放器中鼠标右击选择"播放速度设置&qu ...
电脑window medio player播放器可倍速播放
电脑自带的window medio player播放器可以设置倍速效果今天心血来潮想要学习,就找了资源,但那位老师的语速有点慢,而某盘需要开超级会员才能倍速,我不配.于是发现了它. 1.选中视频右键 ...

html5播放器视频倍速播放功能

我的视频应用类原创文章：

html5播放器视频倍速播放功能相关推荐

最新文章

热门文章