方式一中,播放器的倍速播放效果截图,来自酷播云免费视频平台,播放器自带这个功能有兴趣的朋友,可以注册用一下就知道,主要为中小企业提供免费视频云服务;

实例的演示效果,可以参见 http://www.52player.cn/Demos/CloudPlayer/demo01.html

方式二,主要是为大家自己写倍速播放器代码的原理,采用的是video的playbackRate属性 ( playbackRate 属性设置或返回音频/视频的当前播放速度)。

2018-12-6

方式一:采用第三方云视频平台

HTML5倍数功能视频播放器(加速2倍,1.5倍播放)

手机 html5 播放器 html5player播放器_倍速播放

倍数功能视频播放器的应用:

培训场景,教育教学场景下,可以倍速观看视频,比如1.5倍,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: 'e8888b74d1229efec6b4712e17cb6b7a_e',
  });
</script>

 

参数

类型

默认值

说明

wrap

string / HTMLElement

-

页面上存在需要载入播放器的DOM元素或css选择器

width

number / string

100%

播放器的宽度

height

number / string

auto

播放器的高度

vid

string

-

从 polyv 后台上传的视频会生成一个视频唯一vid

loop

boolean

false

视频播放结束后是否循环播放

autoplay

boolean

false

播放器加载后视频是否自动播放

volume

number

0.75

视频默认音量大小,范围 (0, 1),播放器会记录上一次播放的音量

flash

boolean

false

是否默认打开flash播放器

df

number

-

视频默认清晰度,可设置为0123,分别对应自动、流畅、高清、超清,设置该参数会覆盖后台的设置

hideRepeat

boolean

false

播放结束后是否显示重播面板,可通过play.HTML5.changeRepeat改变

code

string

-

跑马灯设置中自定义的code值

speed

boolean/array

[2, 1.5, 1.2, 0.5]

设置为false则关闭倍速,可传入数组自定义显示哪几种倍速,速率1不需要填入,会自动添加,所设置速率值必须大于0,少于或等于3,最多设置6种速率(不包含1),所设置值会按由大到小自动排序

showHd

boolean

true

是否显示清晰度选择

ignoreIE

boolean

false

设置该选项将会在ie浏览器中禁用HTML5播放器(edge浏览器除外,国内360,QQ等浏览器的兼容模式表现为ie浏览器,所以也会被禁用)

watchStartTime

number

undefined

从第几秒开始播放,需少于视频时长

watchEndTime

number

undefined

播放到第几秒结束播放,需少于视频时长,在该值到结束的进度条禁止点击,如果设置值少入watchStartTime,则watchStartTime失效

skinLocation

number

1

控制栏显示在视频区域内外或不显示,可选0(不显示)、1(视频内)、2(视频外)

ban_history_time

string

off

是否禁止记住播放进度,下次打开会从上次进度打开(设置watchStartTime后还是会从watchStartTime处开始播放),默认为off(不禁止),on为禁止

hideSwitchPlayer

boolean

false

是否禁止显示HTML5与flash播放器切换按钮

priorityMode

string

video

默认打开视频模式还是音频模式,需要该视频有对应的音频转码可选video/audio

audioMode

boolean

true

是否开启音频模式

videoMode

boolean

true

是否开启视频模式,设置为false后将会以音频模式播放,无论是否有音频转码

screenshot

boolean

false

是否开启视频截图功能

ban_seek_by_limit_time

string

on

是否禁止视频拖拽为播放区域

ban_seek

string

off

设置为 on 播放器将会彻底禁止拖拽

loading_bg_img

string

-

视频默认封面图

ban_record_interaction_right_answer

string

off

设置为 on 问答回答正确不会记录,每次刷新播放都需重新回答

手机 html5 播放器 html5player播放器_倍速观看视频_02

手机 html5 播放器 html5player播放器_倍速播放

手机 html5 播放器 html5player播放器_多速率播放器_04

手机 html5 播放器 html5player播放器_倍速播放_05

方式二:自已动手修改HTML5视频标签的速率

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>阿酷TONY</title>
 </head>
 <body>
 <div style="text-align:center">
   <button οnclick="playPause()">播放/暂停</button>
   <button οnclick="makeBig()">放大</button>
   <button οnclick="makeSmall()">缩小</button>
   <button οnclick="makeNormal()">普通</button>
   <button οnclick="getPlaySpeed()" type="button">播放速度是多少?</button>
   <button οnclick="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>