在使用Web播放器的過程中,常用的功能可能由於播放模式、播放方式或瀏覽器環境的不同而需要不同的設定。本文提供Web播放器基礎功能的使用樣本。
常用設定
H5模式和Flash模式播放FLV和HLS視頻需要配置跨域訪問。配置方法請參見配置跨域訪問。
H5模式如未配置跨域訪問,播放時瀏覽器會報以下錯誤:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Flash模式如未配置跨域訪問,播放時瀏覽器會報以下錯誤:
全屏播放後可通過input設定絕對位置來喚起軟鍵盤 。
介面調用規則
Web播放器的基礎功能由屬性或介面實現。
屬性和介面的詳細描述請參見介面說明。
介面的調用規則如下:
HTML5播放模式
在建立播放器建構函式的回呼函數裡調用。樣本如下:
//H5播放模式 var player = new Aliplayer({},function(player) { player.play(); });
Flash播放模式
在ready事件發生之後或建立播放器ready回調裡調用。樣本如下:
//Flash播放模式 player.on('ready',function(e) { player.play(); });
控制播放
Web播放器支援從指定時間點播放和暫停播放等操作。H5模式和Flash模式使用的介面一樣。
從指定時間開始播放
指跳轉到某個時刻進行播放,由seek
介面實現。樣本如下:
//time為指定的時間,單位:秒。
player.seek(time)
暫停播放
指暫停播放視頻,由pause
介面實現。樣本如下:
player.pause()
如需展示大播放按鈕,則需傳入參數true
,設定樣本:player.pause(true)
。
設定顯示模式
Web播放器僅H5模式支援旋轉、鏡像等顯示設定。
支援案頭端和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();
倍速播放
僅H5模式支援倍速播放。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()
})