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

阿酷tony
阿酷tony 这家伙很懒,还没有设置简介

1 人点赞了该文章 · 3519 浏览

我是阿酷tony,从事视频直播行业近十年,方向:视频直播、微信直播、视频加密技术、流媒体环境、网页视频播放器,组建了一个交流群,点击加入一起交流。

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

截图效果: 
7a44b05314c14e9c7c5ebbc62b8a2888.png


图1-1:倍速播放效果
56fef7ac284f97ff9f8b10f099027344.png

图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>

发布于 2021-04-19 21:24

免责声明:

本文由 阿酷tony 原创发布于 SaaS点评网_SaaS软件超市 ,著作权归作者所有。

登录一下,更多精彩内容等你发现,贡献精彩回答,参与评论互动

去 登录! 还没有账号?去注册

暂无评论

帮选软件
友链:OSDWAN国际专线OSDWAN网络方案ISPIP代理IPIP查查畅易