在使用Web播放器的過程中,常用的功能可能由於播放模式、播放方式或瀏覽器環境的不同而需要不同的設定。本文提供Web播放器基礎功能的使用樣本。
常用設定
Web播放器SDK播放FLV和HLS視頻需要配置跨域訪問。配置方法請參見配置跨域訪問。
如未配置跨域訪問,播放時瀏覽器會報以下錯誤:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
全屏播放後可通過input設定絕對位置來喚起軟鍵盤 。
介面調用規則
Web播放器的基礎功能由屬性或介面實現。
屬性和介面的詳細描述請參見介面說明。
介面的調用規則如下:
在建立播放器建構函式的回呼函數裡調用。樣本如下:
var player = new Aliplayer({},function(player) {
player.setSpeed(2);
});控制播放
Web播放器支援從指定時間點播放和暫停播放等操作。
從指定時間開始播放
指跳轉到某個時刻進行播放,由seek介面實現。樣本如下:
//time為指定的時間,單位:秒。
player.seek(time)暫停播放
指暫停播放視頻,由pause介面實現。樣本如下:
player.pause()如需展示大播放按鈕,則需傳入參數true,設定樣本:player.pause(true)。
銷毀播放器
指銷毀播放器執行個體,由dispose介面實現。樣本如下:
player.dispose()設定顯示模式
支援案頭端和iOS的瀏覽器。
支援Android(Chrome瀏覽器、Firefox瀏覽器)。
微信和大部分瀏覽器,由於視頻被劫持播放,使用內建的播放器,所以不支援此功能。
旋轉
指畫面按指定角度旋轉,由setRotate介面實現。設定後還可查詢旋轉角度。樣本如下:
//設定旋轉角度。<角度>正數為順時針旋轉,負數為逆時針旋轉。如:player.setRotate(180)表示順時針旋轉180度。
player.setRotate(<角度>)
//擷取旋轉角度。
player.getRotate()鏡像
支援水平鏡像和垂直鏡像,由setImage介面實現。樣本如下:
//水平鏡像
player.setImage('horizon')
//垂直鏡像
player.setImage('vertical')此外,Web播放器還提供兩個屬性videoHeight和videoWidth用於設定視頻的寬度和高度,高度和寬度一般比容器的小,這樣旋轉和鏡像時不會溢出到父容器外面,樣本如下:
width: '100%', //容器的大小
height: '100%', //容器的大小
videoHeight:"200px", //視頻的高度大小擷取播放資訊
Web播放器支援擷取當前的播放進度和播放時間長度資訊。
擷取當前播放進度
指擷取當前的播放時刻,由getCurrentTime介面實現。樣本如下:
//介面返回的時間單位為秒。
player.getCurrentTime()擷取播放時間長度
指擷取視頻總時間長度。需要在視頻載入完成以後才可以擷取到,可以在play事件後擷取。由getDuration實現,樣本如下:
player.getDuration()監聽播放狀態
指監聽播放器的狀態。由getStatus介面實現。傳回值包括:
init:初始化。
ready:準備。
loading:載入中。
play:播放。
pause:暫停。
playing:現正播放。
waiting:等待緩衝。
error:錯誤。
ended:結束。
樣本如下:
player.getStatus()設定音量
設定音量包括音量大小和靜音設定。
由於video.volume在iOS 和一些Android系統中是可讀屬性,阿里雲Web播放器提供的音量大小方法getVolume和setVolume在iOS系統和部分Android系統會失效。
音量大小
指調節音量大小,由setVolume介面實現。設定後還可擷取音量資訊。樣本如下:
//volume的值為0~1之間的實數。
player.setVolume(0)
//擷取音量資訊。
player.getVolume()靜音設定
指將播放中的視頻設定為靜音狀態,由mute介面實現。樣本如下:
// 設定靜音
player.mute();
// 取消靜音
player.unMute();倍速播放
Web播放器SDK預設的UI內建倍速功能,使用者觀看時可通過介面選擇倍速。如果自訂UI,可通過setSpeed介面實現倍速功能。
關閉倍速設定請參見介面說明中關於setSpeed的描述。
樣本如下:
//設定倍速。以下樣本表示設定為2倍速。
player.setSpeed(2)多清晰度播放
指通過設定多路清晰度流的地址,達成多清晰度播放的效果。
如果使用VID+PlayAuth方式播放,無需額外設定。Web播放器SDK會從點播服務擷取清晰度列表。觀眾點擊播放介面控制欄裡的設定按鈕可以看到清晰度列表。
說明VID+PlayAuth方式下,H5播放模式可以通過設定format屬性選擇播放MP4或MP3播放格式,預設為MP4格式播放。
如果使用URL播放方式播放(即通過設定source屬性播放),需要在source屬性設定中通過JSON結構的索引值對(Key-Value Pair)指定多路清晰度流的地址。設定生效後觀眾點擊播放介面控制欄裡的設定按鈕可以看到清晰度列表。
如需改變清晰度列表的UI,可以通過引用清晰度組件實現。程式碼範例請參見功能展示。
URL播放方式下,source屬性設定中可通過JSON結構的索引值對(Key-Value Pair)包括:
"OD": "<原畫URL>"
"FD": "<流暢URL>"
"LD":"<標清URL>"
"SD": "<高清URL>"
"HD": "<超清URL>"
"2K": "<2K URL>"
"4K": "<4K URL>"以下是URL播放方式設定清晰度的範例程式碼:
//樣本設定清晰度為超清和高清的地址。
source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'Web播放器還支援通過設定qualitySort屬性,表示啟用升序還是降序排列清晰度。
desc表示按倒序排序(從大到小排序)。
asc表示按正序排序(從小到大排序)。
清晰度切換會記住使用者當前選擇的清晰度,下次重新開啟播放視頻時,會優先選擇上次選擇的清晰度,沒有則按預設邏輯選擇低清晰度播放。
使用者選擇的清晰度不能播放時,會自動切換到下一個清晰度並提示,僅H5支援。
迴圈播放
Web播放器支援通過設定rePlay屬性或監聽ended事件實現迴圈播放。
設定rePlay屬性樣本
rePlay:true監聽ended事件樣本
player.on('ended',function(){
player.replay()
})移動端手勢操作
Web 播放器針對移動端小螢幕做了操作上的最佳化,使進度條更容易拖拽,並提供兩個專屬功能:長按倍速、雙擊快進快退。
長按倍速
Web 播放器在移動端預設開啟長按倍速功能,長按除進度條外的任意播放地區超過約 0.5 秒會開始倍速播放,結束長按後恢複原始速度。
您也可以通過 longPressFastForward: false 參數關閉此功能,詳見介面說明。
雙擊快進快退
Web 播放器在移動端預設開啟雙擊快進快退功能,雙擊播放畫面左側約 1/3 地區,會向前跳轉 10 秒,雙擊播放畫面右側約 1/3 地區,會向後跳轉 10 秒。
您也可以通過 dbClickSkip: false 參數關閉此功能,詳見介面說明。