Web直播播放器1.0——騰訊sdk網頁直播播放器

時間  2019-11-13
標籤 web 直播 播放 1.0 騰訊 sdk 網頁 欄目 HTML 简体版
原文   原文鏈接

https://www.qcloud.com/document/product/267/5704javascript

 

功能介紹

騰訊雲視頻直播播放器Web SDK解決方案，可幫助騰訊雲視頻用戶直接使用通過驗證的視頻播放能力，經過靈活的接口，快速同自有Web應用集成，以實現桌面應用播放功能。同時SDK提供在WEB端上傳視頻的能力。

該SDK所播放的文件受限於全局防盜鏈功能定義。詳細內容請查看官網FAQ安全功能相關說明。

該文檔面向考慮使用騰訊雲視頻直播播放器Web SDK進行開發並具有Javascript語言基礎的開發人員。html

格式支持

播放格式

WEB SDK直播視頻格式支持：前端

播放格式 PC瀏覽器 移動端瀏覽器
HLS（m3u8） 支持 支持
RTMP 支持 不支持
FLV 支持 不支持

Android 系統兼容性問題
不像iPhone上只有一個Safari瀏覽器，Android上的系統標配瀏覽器有很是多的實現版本，因此Android手機瀏覽器的兼容是一個業界難題，故此表格中所示的手機瀏覽器格式支持狀況比不適用於全部Android手機。java

準備工做

Step 1：開通服務

註冊騰訊雲賬號，並開通直播服務web

Step 2：建立頻道

進入直播管理控制檯並建立直播頻道
直播視頻管理chrome

Step 3：獲取ID

您能夠在直播管理控制檯查找到直播頻道並對該頻道進行管理。在控制界面您能夠找到app_id。在基礎設置中，能夠查詢到該頻道的頻道id。數據庫

Step 4：頁面準備

在須要播放視頻的頁面（包括PC或H5）中引入初始化腳本json

<script src="//qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script>;

注意事項：播放頁面須要掛ip或域名訪問，如若直接打開本地靜態頁面將沒法播放api

備註：另外能夠經過服務端API獲取頻道ID和APPID，參考文檔連接瀏覽器

API 基礎使用方法

Step 1：添加播放器容器

在須要展現播放器的頁面位置加入播放器容器

例如：在index.html中加入以下代碼

<div id="id_video_container" style="width:100%; height:auto;"></div>

容器id以及寬高均可以自定義。

Step 2：建立Player 對象

接下來在頁面底部引入的Javascript腳本中，建立一個播放器對象，這時將使用播放器的構造函數

var player = new qcVideo.Player("id_video_container", { "channel_id": "16093104850682282611", "app_id": "1251783441", "width" : 480, "height" : 320 });

調用構造函數將會生成一個播放器對象，而且根據channel_id和app_id找到對應的直播視頻流進行播放。若是沒有channel_id和app_id，您也可使用直播地址的形式進行播放，具體示例如API使用案例中的case3。您可使用播放器對象player 對播放器進行控制。播放器對象的參數選項下方API方法總覽有詳細介紹。

完整實例代碼

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/> <title>直播</title> </head> <body> <div id="id_video_container" style="width:100%; height:auto;"></div> <script src="//qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script> <script type="text/javascript"> (function () { var player = new qcVideo.Player("id_video_container", { "channel_id": "16093104850682282611", "app_id": "1251783441", "width" : 480, "height" : 320 }); })() </script> </body> </html>

API 使用案例

說明：使用API需先完成第4部分API基礎使用方法中的step1部分，添加播放器容器完成後再進行API使用

Case 1：在PC或移動端（H5）中播放直播視頻

直播SDK在PC和H5中的使用方式是同樣的，SDK會檢測平臺，自動選擇最優的播放方案。例如在PC平臺，SDK會優先使用Flash 播放器以適應多種視頻格式的狀況（須要flash版本高於10，不然將提示升級flash），而在移動端H5則會使用video標籤進行播放（若是瀏覽器不支持H5，則提示使用QQ瀏覽器）。SDK同時支持傳頻道ID或視頻文件地址的方式播放，

備註：兩種播放方式不能混合使用。

Case 2：使用頻道ID播放視頻

var option = { "channel_id": "16093425727656143421", "app_id": "1251132611", "width" : 480, "height" : 320 //...可選填其餘屬性 }; var player = new qcVideo.Player("id_video_container", option);

注意：使用頻道ID播放視頻不支持直播碼的方式

Case 3：使用直播視頻地址播放視頻

若是沒有app_id及channel_id，播放器也支持使用直播視頻地址播放視頻。

var option = { "live_url" : "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", "live_url2" : "http://2000.liveplay.myqcloud.com/live/2000_2a1.flv", "width" : 480, "height" : 320 //...可選填其餘屬性 }; var player = new qcVideo.Player("id_video_container", option);

備註：最多支持傳入兩個播放地址，live_url，live_url2 ；若是這兩個地址都傳了，那麼會按平臺支持最好的一個地址選擇進行播放。例如： 當前環境是pc，那麼會優先選擇其中爲rtmp或flv的格式；當前環境爲手機H5，會優先選擇 hls格式進行播放。

Case 4：如何使用"彈幕"功能?

在播放器初始化完成後，調用播放器對象的addBarrage(barrage) 方法，能夠爲視頻添加彈幕。具體參數參考API方法總覽的說明。

例子：給正在播放的視頻添加兩條彈幕

var barrage = [ {"type":"content", "content":"hello world", "time":"1"}, {"type":"content", "content":"居中顯示", "time":"1", "style":"C64B03;30","position":"center"} ]; player.addBarrage(barrage);

備註：彈幕功能僅在前端實現，後臺支持請自行開發。彈幕只在PC Flash播放器中生效，H5暫時不具有彈幕功能

API 方法總覽

1. 構造函數

qcVideo.Player(id, option, listener);

id: String ; 必選參數; 頁面放置播放器的容器ID，能夠自由定義。

option: Object ; 必選參數; 播放器的參數可設置選項，具體選項：

參數 類型 默認值 參數說明
channel_id String 無 用直播視頻ID播放方式爲必選參數
app_id String 無 條件同上爲必選參數，同一個帳戶下的視頻，該參數是相同的
width Number 無 必選，例如：640，設置播放器寬度，單位爲像素
height Number 無 必選，例如：480，設置播放器高度，單位爲像素
cache_time Number 0.3 直播畫面開始播放前，最大緩存時間 ; 這個屬性可避免有效下行帶寬不足致使免rtmp直播卡頓的狀況(可選參數)
備註：該選項只對PC平臺Flash播放器生效
h5_start_patch Object 無 h5播放，開始播放前貼片(可選參數)
{ 
url : 圖片地址, 
stretch: false //是否拉伸圖片鋪面整個播放器，默認false
}
wording Object 無 直播提示語自定義(可選參數，詳細信息可見錯誤碼)
{ 
'1' : '數據庫錯誤',
'2' : '鏈接不到直播源，直播源沒有推送視頻內容(hls)',
'3' : '直播已經結束啦(hls)',
'113' : '鏈接超時，請稍後再試',
'114' : '鏈接超時，請稍後再試',
'1000' : 'channelID或者APPID錯誤',
'1001' : '無效參數，獲取bizid失敗',
'1009' : '直播源已失效',
'10000' : '請求超時，請檢查網絡設置',
'10008' : '密碼錯誤，請從新輸入', //無效密碼
'10020' : '直播帳戶餘額已不足，請及時充值', 
'11044' : '無效請求',
'11045' : '請求參數缺乏channelID',
'11046' : '密碼錯誤，請從新輸入',
'20110' : '密碼錯誤，請從新輸入',
'20113' : '直播已經結束啦，請稍後再來' , //'downstream type is not exist' 拉流不存在
'20201' : '直播已經結束啦，請稍後再來', //get upstream info error' 查詢推流錯誤
'20301' : '直播頻道不存在，請確認頻道ID',
'TipReconnect' : '從新鏈接中'
'TipRequireSafari' : '當前瀏覽器不能支持視頻播放,請使用safari打開觀看'
'TipRequireFlash' : '當前瀏覽器不能支持視頻播放，可下載最新的QQ瀏覽器或者安裝FLASH便可播放'
'TipVideoinfoResolveError' : '視頻信息解析錯誤，請檢查參數是否正確', //接口沒有返回json數據，沒法解析
'TipVideoinfoError' : '視頻信息錯誤，請檢查參數是否正確',
'TipConnectError' : '鏈接服務失敗，請檢查網絡設置',
'TipConnectDeny' : '鏈接服務被拒絕', //flash請求觸發安全異常
'TipLiveEnd' : '直播已經結束啦，請稍後再來', // NetStream.Play.Stop 事件, 
'TipStreamNotFound' : '直播已經結束啦，請稍後再來' //鏈接不到直播源，直播源沒有推送視頻內容
}
live_url String 無 直播地址，支持hls/rtmp/flv三種格式
用視頻地址播放方式爲必選參數
live_url2 String 無 直播地址，同上（可選參數）
volume Number 0.5 設置音量初始值0 到 1，默認0.5。（可選參數）
備註：該選項只對Flash播放器生效
https Number 0 設置對播放頁的https支持，0：關閉，1：開啓
hide_volume_tips Number 0 是否隱藏音量提示，0：顯示，1：隱藏 
備註：該選項只對Flash播放器生效
x5_type String 無 經過 video 屬性「x5-video-player-type」聲明啓用同層H5播放器，支持的值：h5 (該屬性爲TBS內核實驗性屬性，非TBS內核不支持，具體介紹參照 TBS文檔 )
x5_fullscreen String 無 視頻播放時將會進入到全屏模式，支持的值： true:開啓 (該屬性爲TBS內核實驗性屬性，非TBS內核不支持，具體介紹參照 TBS文檔 )
WMode String window Window 模式不支持其餘頁面元素覆蓋在 Flash 播放器上面，如須要能夠修改成 opaque 或其餘 flash wmode 的參數值，能夠在 Flash 播放器上進行覆蓋其餘元素。
備註：該選項只對PC平臺Flash播放器生效

listener : Object ; 可選參數 ; 播放狀態變化回調函數列表

函數名稱 類型 說明
playStatus function 播放狀態變動時觸發，回調函數的參數 status：String 
返回值：
ready: 「播放器已準備就緒」, playing:」播放中」 , playEnd:」播放結束」 , error: 「播放異常結束或者遇到錯誤」 //因爲移動端播放事件觸發條件不一致，若是監聽播放結束事件建議同時監聽error，以避免回調不能正確執行。 
type：String 在遇到error時返回錯誤類型 
例子：function(status, type){ ... }

2. 設置和動做

構造函數返回的播放器對象具備如下設置方法

方法 說明
resize(width,height) 參數：width :int；height :int 
功能：設置當前播放器寬度高度
返回：無
play() 功能：開始播放
返回：Int(統一返回碼)
備註：該功能僅PC端Flash播放器支持
stop() 功能：中止播放
返回：Int(統一返回碼)
備註：該功能僅PC端Flash播放器支持
pause() 功能：暫停當前播放的視頻 
返回：Int(統一返回碼)
備註：該功能僅PC端Flash播放器支持
resume() 功能：恢復播放視頻
返回：Int(統一返回碼)
備註：該功能僅PC端Flash播放器支持
addBarrage(barrage) 參數：barrage://Array 彈幕信息 
[{ 
"type":"content", //消息類型 ,content:普通文本 (必選) 
"content":"hello world", //文本消息 (必選) 
"time":"1.101",//單位秒 ，表示距離當前調用添加字幕的時間多久後，開始顯示該條字幕 (必選) 
"style": "C64B03;35",// 分號分割，第一項顏色值，第二項字體大小 (可選) 
"postion":"center" //固定位置 
center: 居中，bottom: 底部， up: 頂上 (可選) }, ... ] 
功能：添加彈幕 
返回：Int 返回碼 
備註：彈幕僅在前端實現，後臺功能請自行開發。該功能只在PC Flash播放器中生效
closeBarrage() 功能：關閉彈幕，關閉後從新調用addBarrage可開啓彈幕。 
返回：Int 返回碼 
備註：彈幕僅在前端實現，後臺功能請自行開發。該功能只在PC Flash播放器中生效

這些設置方法的統一返回碼是：

錯誤碼 含義
200 操做成功
0 播放器未徹底初始化
-2 未知操做命令

問題排查

錯誤碼列表

SDK使用過程當中出現的異常code對照表

  • 前端返回錯誤
提示語 說明
視頻信息解析錯誤，請檢查參數是否正確 接口沒有返回json數據，沒法解析
視頻信息錯誤，請檢查參數是否正確 視頻信息解析錯誤
鏈接服務失敗，請檢查網絡設置 獲取視頻頻道信息失敗
鏈接服務被拒絕 flash請求觸發安全異常
缺乏視頻數據 視頻源數據缺失
直播已經結束啦，請稍後再來 NetStream.Play.Stop 事件
直播已經結束啦，請稍後再來 鏈接不到直播源，直播源沒有推送視頻內容
  • 後臺返回錯誤
Code 提示語 說明
1 數據庫錯誤 數據庫鏈接超時或者查詢錯誤
2 鏈接不到直播源,直播源沒有推送視頻內容(hls) 沒法獲取m3u8文件，鏈接不到直播源
3 直播已經結束啦(hls) Manifest不是合法的m3u8文件，或直播源已結束
113 鏈接超時，請稍後再試 參數錯誤
1000 channelID或者APPID錯誤 app_id填寫錯誤（長度錯誤）
1001 無效參數，獲取bizid失敗 app_id填寫錯誤（長度正確，內容錯誤）
1009 直播源已失效 無效播放地址，直播源已失效
10000 請求超時 拉取播放器配置信息與視頻信息超時，請檢查網絡重試，超時時間爲10s
10001 數據解析失敗 拉取播放器配置信息與視頻信息獲取到的數據解析失敗，多是網絡問題或者服務器異常
10002 鏈接超時，請稍後再試 拉取播放器配置信息與視頻信息失敗，多是網絡問題或者服務器異常
10008 密碼錯誤，請從新輸入 無效密碼
10020 直播帳戶餘額已不足，請及時充值 餘額不足
11044 無效請求 缺乏APPID
11045 請求參數缺乏channelID 缺乏Channel ID
11046 密碼錯誤，請從新輸入 缺乏密碼
20110 密碼錯誤，請從新輸入 無效密碼
20113 直播已經結束啦，請稍後再來 downstream type is not exist 拉流不存在
20201 直播已經結束啦，請稍後再來 get upstream info error 查詢推流錯誤
20301 直播頻道不存在，請確認頻道ID channel_id錯誤（app_id填寫正確）

備註：如遇到未在列表中的異常code，請聯繫咱們的客服，客服會安排工程師進行解決。

常見問題

    • 爲何H5播放視頻拉伸變形了？

      解答：H5並不具有拉伸視頻的能力，請檢查播放器的容器寬高是否設置正確

    • 爲何提示「直播已經結束啦，請稍後再來」

      解答：播放鏈接視頻直播地址，未收到響應，並重試5次後仍未成功將出現這個提示。這時須要確認視頻是否在進行推流，網絡是否通暢。

    • QQ瀏覽器下沒法在蓋住視頻

      解答：瀏覽器接管了H5的視頻播放功能，X5內核視頻播放使用了自研的播放器，考慮用戶體驗，瀏覽器使用了統一的播放界面。相關信息參考QQ瀏覽器文檔說明

    • iOS系統下視頻自動全屏播放

      解答：iOS系統因爲webkit設置緣由，默認視頻全屏播放，若是您的視頻須要在APP內實現內聯播放，能夠設置webkit-playsinline屬性。目前iOS10如下版本的Safari沒法禁止視頻自動全屏。

    • 爲何在 PC Chrome 中Flash播放器會有兩個播放按鈕？

      解答：從Chrome 42版本開始將再也不自動播放Flash, 只對主要的Flash內容進行自動播放，其它的Flash內容將被暫停播放，除非用戶決定去手動點開它。

    • 爲何在 PC 瀏覽器中能夠播放直播視頻，移動端卻不行

      解答：在移動端瀏覽器中播放直播視頻，目前只支持hls協議，所以須要確認直播拉流地址是否有hls拉流url。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程