HTML5倍数功能视频播放器（加速2倍，1.5倍播放）

本文链接：

本文章为原创文章倍速播放软件，因为有很多朋友加我QQ咨询播放器来源的事，我在这补充说明一下：

方式一中，播放器的倍速播放效果图片，来自酷播云免费视频系统，播放器自带这个功能有兴趣的朋友，可以登录用一下就明白 ，主要为中小企业提供免费视频云服务；

实例的演示效果，可以参见

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

2018-12-6

HTML5倍数功能视频播放器（加速2倍，1.5倍播放）

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

培训场景，教育课堂情景下，可以倍速观看视频，比如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>

参数类别默认值说明

string / HTMLElement

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

width

number / string

播放器的尺寸

height

number / string

播放器的高度

string

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

boolean

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

autoplay

boolean

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

volume

number

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

flash

boolean

是否默认开启flash播放器

number

视频默认清晰度，可更改为0、1、2、3，分别对应自动、流畅、高清、超清，设置该参数会覆盖后台的设定

hideRepeat

boolean

播放结束后能否显示重播面板，可借助play.HTML5.changeRepeat改变

string

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

speed

boolean/array

[2, 1.5, 1.2, 0.5]

设置为false则关闭倍速，可传入函数自定义显示哪几种倍速，速率1不需要填入，会手动添加，所设定速度值应该小于0，少于或等于3，最多设置6种速率（不包括1），所设定值会按由大到小手动排序

showHd

boolean

是否显示清晰度选择

ignoreIE

boolean

设置该选项将会在ie浏览器中禁用HTML5播放器（edge浏览器除外，国内360，QQ等浏览器的兼容方式体现为ie浏览器，所以也会被禁用）

watchStartTime

number

从第几秒开始播放，需超过视频时长

watchEndTime

number

播放到第几秒结束播放，需超过视频时长，在该值到结束的进度条禁止点击，如果修改值少入watchStartTime，则watchStartTime失效

skinLocation

number

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

ban_history_time

string

是否允许记住播放进度，下次开启会从今天进度打开（设置watchStartTime后还是会从watchStartTime处开始播放）倍速播放软件，默认为off(不允许)，on为禁止

hideSwitchPlayer

boolean

是否允许显示HTML5与flash播放器切换按键

priorityMode

string

默认开启视频方式还是音频体系，需要该视频有对应的音频码流可选video/audio

audioMode

boolean

是否打开音频方式

videoMode

boolean

是否打开视频方式，设置为false后将会以音频体系播放，无论能否有音频码流

screenshot

boolean

是否打开视频图片功能

ban_seek_by_limit_time

string

是否允许视频拖拽为播放区域

ban_seek

string

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

loading_bg_img

string

视频默认封面图

ban_record_interaction_right_answer

string

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>阿酷TONY</title>

</head>

<body>

<div>

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

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-120609-1.html