HTML5倍數功能視訊播放器（加速2倍，1.5倍播放）
方式一：採用第三方雲視訊平臺
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>
| 引數 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| 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 | - | 視訊預設清晰度，可設定為0、1、2、3，分別對應自動、流暢、高清、超清，設定該引數會覆蓋後臺的設定 |
| 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視訊標籤的速率
<!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>