Web播放器 TcPlayer——騰訊直播sdk的網頁播放器

https://www.qcloud.com/document/product/267/7479

功能介紹

騰訊雲Web播放器主要解決在手機瀏覽器和PC瀏覽器上播放音視頻流的問題，使您的視頻內容能夠不依賴用戶安裝App就能夠在朋友圈、微博等社交平臺進行傳播。

本文檔適合有必定Javascript語言基礎的開發人員閱讀。

基礎知識

對接以前先要了解以下的基礎知識，很是有必要：

• 直播和點播
  直播是指視頻源是實時的，一旦主播停播了，這個地址就已經失去意義了，並且因爲是實時直播，因此播放器在播直播視頻的時候是沒有進度條滴。
  點播是指視頻源是一個服務器上的文件，文件只要沒有被提供方刪除，就隨時能夠播放， 並且因爲整個視頻都在服務器上，因此播放器在播點播視頻的時候是有進度條的哦。

• 協議的支持
  Web播放器的視頻播放能力自己不是網頁代碼實現的，而是靠瀏覽器的支持，因此其兼容性並不像咱們想象的那麼好，您必需要接受一個事實：不是全部的手機瀏覽器都能有符合預期的表現，有些手機瀏覽器甚至根本就不支持視頻播放。

  最多見的用於網頁直播的視頻源地址是以m3u8結尾的地址，咱們稱其爲HLS (HTTP Live Streaming)，這是蘋果推出的標準。因爲蘋果的影響力，目前各手機瀏覽器產品對這種格式的兼容性最好，但它有個自然的問題，就是延遲比較大，通常是20-30秒左右的延遲，沒有辦法，在手機瀏覽器上咱們並無其它選擇。

  在PC上狀況會好不少，由於PC上的瀏覽器目前尚未拋棄flash控件，而flash控件不追求潔癖，支持的視頻源格式挺多的，並且各瀏覽器上的flash控件都是Adobe它家本身開發，因此兼容性很是好。（悄悄滴告訴你，Chrome最近對flash的態度不太友好）
  

對接攻略

Step 1：頁面準備工做

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

<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>; 

注意：直接用本地網頁是調試不了的，由於騰訊雲Web播放器處理不了這種狀況下的跨域問題。

Step 2：HTML裏放置容器

在須要展現播放器的頁面位置加入播放器「容器」，也就是放一個div，而後給它取個名字，好比: id_test_video 。以後視頻的畫面都會在這個容器裏渲染，容器的大小控制您可使用div的屬性進行控制，示例代碼以下：

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

Step 3：對接視頻的播放

接下來就要寫 javascript 代碼了，這些代碼的做用是去指定的 URL 地址拉取音視頻流，並將視頻畫面呈現到Step2中添加的容器裏。

3.1 一次簡單的播放

以下是一條典型的直播URL地址，它是HLS（m3u8）協議的，若是主播還在直播中的話，那麼用 VLC 等播放器是能夠直接打開該 URL 進行觀看的：

http://2157.liveplay.myqcloud.com/2157_358535a.m3u8 // m3u8播放地址 

咱們如今要在手機瀏覽器上播放這個 URL 的視頻，javascript代碼能夠這樣寫：

var player = new TcPlayer('id_test_video', { "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", //請替換成實際可用的播放地址 "autoplay" : true, //iOS下safari瀏覽器，以及大部分移動端瀏覽器是不開放視頻自動播放這個能力的 "coverpic" : "http://www.test.com/myimage.jpg", "width" : '480',//視頻的顯示寬度，請儘可能使用視頻分辨率寬度 "height" : '320'//視頻的顯示高度，請儘可能使用視頻分辨率高度 }); 

這段代碼就能夠支持在PC以及手機瀏覽器上播放HLS（m3u8）協議的直播視頻了，不過，前面咱們有說過，HLS（m3u8）協議的視頻雖然兼容性還不錯（部分Android手機依然不支持），但其延遲很是高，大約20秒以上的延遲。

3.2 PC上實現更低的延遲

那麼對於PC瀏覽器而言，咱們是否能夠作的更好呢？固然能夠，由於PC瀏覽器支持flash，它可強大多了，如今咱們的代碼要這樣寫：

var player = new TcPlayer('id_test_video', { "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", "flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增長了一個flv的播放地址，用於PC平臺的播放 請替換成實際可用的播放地址 "autoplay" : true, //iOS下safari瀏覽器，以及大部分移動端瀏覽器是不開放視頻自動播放這個能力的 "coverpic" : "http://www.test.com/myimage.jpg", "width" : '480',//視頻的顯示寬度，請儘可能使用視頻分辨率寬度 "height" : '320'//視頻的顯示高度，請儘可能使用視頻分辨率高度 }); 

跟前一段代碼的區別就在於，咱們增長了一個flv的播放地址，騰訊雲Web播放器若是發現目前的瀏覽器是PC瀏覽器，會主動選擇flv鏈路，由於能夠實現更低的延遲。

固然，前提條件是FLV和HLS（m3u8）這兩個地址都是能夠出流的，若是您使用騰訊雲的視頻直播服務，這個問題是不須要犯愁的，由於騰訊雲的每一條直播頻道都默認支持FLV、RTMP和HLS（m3u8）三種播放協議。

3.3 播放不了怎麼辦？

若是您發現視頻不能播放，基本上逃不出以下幾個緣由：

• （緣由一） 視頻源有問題
  若是是直播URL，那必定要檢查一下是否是主播已經中止推流了，狀態不處於「直播中」的狀況，能夠用浮窗提示一下觀衆：「主播已經離開」。
  若是是點播URL，那要檢查您要播放的文件是否還在服務器上，好比要播放的地址是否已經被其它人從點播系統移除了。

• （緣由二） 本地網頁調試
  目前騰訊雲的 Web 播放器是不支持本地網頁去調試的（即經過file://協議來打開視頻播放的網頁），主要是瀏覽器有跨域安全限制。因此您若是是在Windows上隨便放一個test.html文件而後測試，是確定播放不了的，須要將其上傳到一個服務器上進行測試。固然前端工程師能夠經過反向代理的方式對線上的頁面進行本地代理以實現本地調試，這是主流可行的本地調試辦法。

• （緣由三） 手機兼容問題
  FLV 和 RTMP 這兩種地址，在普通的手機瀏覽器上都是不支持的（最新版本的QQ瀏覽器支持flv協議的播放，但普及度還不高），只能用HLS（m3u8)。

• （緣由四） 跨域安全問題
  PC瀏覽器的視頻播放是基於Flash控件實現的，但作過Flash開發的同窗都知道，Flash控件會作跨域訪問檢查，當您要播放的視頻所存放的服務器沒有部署跨域策略時，纔會碰到這個問題。解決方法就是：在視頻服務器的根域名下的跨域配置文件 crossdomain.xml 中增長 qq.com 域名：

  <cross-domain-policy> <allow-access-from domain="*.qq.com" secure="false"/> </cross-domain-policy> 

Step 4：給播放器設置封面

在前面的代碼例子中，您應該注意到 「coverpic」 這個參數了，在這裏將詳細介紹這個屬性的使用方法。

備註：封面功能有可能在部分移動端播放環境下失效，因爲移動端視頻播放環境相對 PC 來講比較複雜，各個瀏覽器和 APP 的 Webview 對 H5 video 實現的方式並不統一。若是遇到功能失效的狀況，歡迎向咱們的技術支持反饋（反饋內容包括系統、瀏覽器或APP的版本等關鍵信息），咱們將盡量去支持。

4.1 簡單設置封面

coverpic能夠傳入一個圖片地址做爲播放器的封面，將在播放器區域內居中而且以圖片的實際分辨率進行顯示

"coverpic" : "http://www.test.com/myimage.jpg" 

4.2 設置封面的展示樣式

coverpic 同時支持傳入一個對象，對象中能夠進行設置封面的展示樣式 style 和圖片地址 src。

style支持的樣式有3種：

• "default" 居中而且以圖片的實際分辨率進行顯示。
• "stretch" 拉伸鋪滿播放器區域，圖片可能會變形。
• "cover" 優先橫向等比拉伸鋪滿播放器區域，圖片某些部分可能沒法顯示在區域內。

"coverpic" : {"style":"stretch", "src":"http://www.test.com/myimage.jpg"} 

4.3 實現用例

這裏有一個線上的示例代碼，裏面使用了cover方式顯示封面，在PC瀏覽器中右鍵「查看頁面源碼」便可查看頁面的代碼實現：
http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer-cover.html

備註：在某些移動端設置封面會無效，具體說明請查看常見問題

Step 5：多清晰度的支持

5.1 原理介紹

咱們知道優酷、土豆、騰訊上的視頻有些是有多清晰度選擇的，這個效果如何實現呢？

這裏要特別科普一下：播放器自己是沒有能力去改變視頻的清晰度的，在視頻源產生的地方其實只有一種清晰度，咱們稱之爲原畫，而原畫視頻編碼格式和封裝格式有不少種，在 Web 端沒法徹底支持播放全部的視頻格式，點播支持必須是以 H.264 爲視頻編碼，以 mp四、flv 爲封裝格式的視頻。

那麼多清晰度是怎麼實現的呢？ 這裏就是視頻雲發揮做用的地方了：

• 對於直播，來自主播那一端的原始視頻會在騰訊雲進行實時的轉碼，分出多路轉碼後的視頻，好比咱們常說的高清-HD，以及標清-SD，每一路視頻都有其對應的地址：

  http://2157.liveplay.myqcloud.com/2157_358535a.m3u8 // 原畫 http://2157.liveplay.myqcloud.com/2157_358535a_900.m3u8 // 高清 http://2157.liveplay.myqcloud.com/2157_358535a_550.m3u8 // 標清 

• 對於點播，一個視頻文件上傳到騰訊雲之後，您能夠操做對該視頻文件進行轉碼，產生另外幾種清晰度的視頻，好比咱們常說的高清-HD，以及標清-SD，須要注意的是，上傳後的原始視頻是未通過騰訊雲轉碼的，不能直接用於播放。

  http://200002949.vod.myqcloud.com/200002949_b6ffc.f240.m3u8 // 原畫，用轉碼後的超清替換 http://200002949.vod.myqcloud.com/200002949_b6ffc.f230.av.m3u8 // 高清 http://200002949.vod.myqcloud.com/200002949_b6ffc.f220.av.m3u8 // 標清 

  備註：上傳後的原始視頻是未通過騰訊雲轉碼的，不能直接用於播放

5.2 代碼實現

以下的代碼是讓播放器支持多種清晰度的支持，也就是在播放器的用戶界面上展現多種清晰度線路的選擇。

var player = new TcPlayer('id_test_video', { "m3u8" : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f240.m3u8",//請替換成實際可用的播放地址 "m3u8_hd" : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f230.av.m3u8", "m3u8_sd" : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f220.av.m3u8", "autoplay" : true, //iOS下safari瀏覽器，以及大部分移動端瀏覽器是不開放視頻自動播放這個能力的 "coverpic" : "http://www.test.com/myimage.jpg", }); 

5.3 實現用例

這裏有一個線上的示例代碼，裏面使用了多種分辨率的設置以及切換功能，在PC瀏覽器中右鍵「查看頁面源碼」便可查看頁面的代碼實現：
http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer-clarity.html?autoplay=true

正常狀況將看到這樣的效果：

pc端現已支持多種清晰度播放並支持切換的功能，移動端還沒有支持。

Step 6：定製錯誤提示語

咱們默認的提示語您可能以爲不符合您的需求，好比「網絡錯誤，請檢查網絡配置或者播放連接是否正確」或者「視頻解碼錯誤」等等，咱們擔憂這些提示語在您看來可能太乾癟了，因此騰訊雲Web播放器將支持提示語定製：

6.1 代碼實現

以下是讓播放器支持自定義提示語的核心代碼，設置的提示語主要落在wording屬性上。

var player = new TcPlayer('id_test_video', { "m3u8" : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8",//請替換成實際可用的播放地址 "autoplay" : true, //iOS下safari瀏覽器是不開放這個能力的 "coverpic" : "http://www.test.com/myimage.jpg", "wording": { 2032: "請求視頻失敗，請檢查網絡", 2048: "請求m3u8文件失敗，多是網絡錯誤或者跨域問題" } }); 

6.2 實現用例

這裏有一個線上的示例代碼，裏面使用了自定義提示文案的功能，在PC瀏覽器中右鍵「查看頁面源碼」便可查看頁面的代碼實現：
http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer.html?m3u8=http://2527.vod.myqcloud.com/2527_b393eb1.f230.av.m3u8

6.3 錯誤碼對照表

Code	提示語	說明
1	網絡錯誤，請檢查網絡配置或者播放連接是否正確	(H5提示的錯誤)
2	網絡錯誤，請檢查網絡配置或者播放連接是否正確	視頻格式WEB播放器沒法解碼(H5提示的錯誤)
3	視頻解碼錯誤	(H5提示的錯誤)
4	當前系統環境不支持播放該視頻格式	(H5提示的錯誤)
5	當前系統環境不支持播放該視頻格式	播放器判斷當前瀏覽器環境不支持播放傳入的視頻，多是當前瀏覽器不支持MSE或者Flash插件未啓用
10	請勿在file協議下使用播放器，可能會致使視頻沒法播放
11	使用參數有誤，請檢查播放器調用代碼
12	請填寫視頻播放地址
13	直播已結束,請稍後再來	RTMP正常播放過程當中觸發事件 (NetConnection.Connect.Closed) (Flash提示的錯誤)
1001	網絡錯誤，請檢查網絡配置或者播放連接是否正確	網絡已斷開( NetConnection.Connect.Closed) (Flash提示的錯誤)
1002	獲取視頻失敗，請檢查播放連接是否有效	拉取播放文件失敗( NetStream.Play.StreamNotFound)，多是服務器錯誤或者視頻文件不存在 (Flash提示的錯誤)
2032	獲取視頻失敗，請檢查播放連接是否有效	(Flash提示的錯誤)
2048	沒法加載視頻文件，跨域訪問被拒絕	請求m3u8文件失敗，多是網絡錯誤或者跨域問題 (Flash提示的錯誤)

備註：
Code 1 ~ 4 對應的是 H5 的原生事件。
因爲Flash的黑盒特性以及H5視頻播放標準的不肯定性，錯誤提示語會不按期更新。

源碼參考

這裏有一個線上的示例代碼，在PC瀏覽器中右鍵「查看頁面源碼」便可查看頁面的代碼實現：

http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer.html?autoplay=true

您也用它來測試播放器的效果，在連接後面加上須要播放的視頻地址，刷新後就會播放這個視頻地址：

http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer.html?autoplay=true&m3u8=http://2527.vod.myqcloud.com/2527_b3907044441c11e6a46d294f954f93eb.f230.av.m3u8 

參數列表

下面列出了播放器支持的全部參數，並進行了詳細的說明。

參數	類型	默認值	參數說明
m3u8	String	無	原畫m3u8 播放URL  示例: http://2157.liveplay.myqcloud.com/2157_358535a.m3u8
m3u8_hd	String	無	高清m3u8 播放URL  示例: http://2157.liveplay.myqcloud.com/2157_358535ahd.m3u8
m3u8_sd	String	無	標清m3u8 播放URL  示例: http://2157.liveplay.myqcloud.com/2157_358535asd.m3u8
flv	String	無	原畫flv 播放URL  示例: http://2157.liveplay.myqcloud.com/2157_358535a.flv
flv_hd	String	無	高清flv 播放URL  示例: http://2157.liveplay.myqcloud.com/2157_358535ahd.flv
flv_sd	String	無	標清flv 播放URL  示例: http://2157.liveplay.myqcloud.com/2157_358535asd.flv
mp4	String	無	原畫mp4 播放URL  示例: http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.mp4
mp4_hd	String	無	高清mp4 播放URL  示例: http://200002949.vod.myqcloud.com/200002949_b6ffc.f40.mp4
mp4_sd	String	無	標清mp4 播放URL  示例: http://200002949.vod.myqcloud.com/200002949_b6ffc.f20.mp4
rtmp	String	無	原畫rtmp 播放URL  示例: rtmp://2157.liveplay.myqcloud.com/live/2157_280d88
rtmp_hd	String	無	高清rtmp 播放URL  示例: rtmp://2157.liveplay.myqcloud.com/live/2157_280d88hd
rtmp_sd	String	無	標清rtmp 播放URL  示例: rtmp://2157.liveplay.myqcloud.com/live/2157_280d88sd
width	Number	無	必選，設置播放器寬度，單位爲像素  示例: 640
height	Number	無	必選，設置播放器高度，單位爲像素  示例: 480
volume	Number	0.5	設置初始音量，範圍：0~1 [v2.2.0+]  示例: 0.6
live	Boolean	false	必選，設置視頻是否爲直播類型，將決定是否渲染時間軸等控件，以及區分點直播的處理邏輯  示例: true
autoplay	Boolean	false	是否自動播放 備註：該選項只對大部分PC平臺生效  示例: true
coverpic	String / Object	無	預覽封面，能夠傳入一個圖片地址或者一個包含圖片地址 src 和顯示樣式 style 的對象。 style可選屬性： default 居中1:1顯示  stretch 拉伸鋪滿播放器區域，圖片可能會變形  cover 優先橫向等比拉伸鋪滿播放器區域，圖片某些部分可能沒法顯示在區域內  示例: "http://www.test.com/myimage.jpg"  或者 {"style": "cover", "src": "http://www.test.com/myimage.jpg"}
controls	String	"default"	default 顯示默認控件，none 不顯示控件，system 移動端顯示系統控件 備註：若是須要在移動端使用系統全屏，就須要設置爲system。默認全屏方案是使用 Fullscreen API + 僞全屏的方式例子  示例: "system"
flash	Boolean	true	是否優先使用 flash 播放視頻， 備註：該選項只對PC平臺生效 [v2.2.0+]  示例: true
h5_flv	Boolean	false	是否啓用 flv.js 的播放 flv。啓用時播放器將在支持 MSE 的瀏覽器下，採用 flv.js 播放 flv，然而並非全部支持 MSE 的瀏覽器均可以使用 flv.js ,因此播放器不會默認開啓這個屬性。[v2.2.0+]  示例: true
x5_player	Boolean	false	是否啓用 TBS 的播放 flv。啓用時播放器將在 TBS 模式下(例如 Android 的微信、QQ瀏覽器）將 flv 播放地址直接賦給 <video> 播放。TBS 視頻能力 [v2.2.0+]  示例: true
x5_type	String	無	經過 video 屬性 「x5-video-player-type」 聲明啓用同層H5播放器，支持的值：h5 (該屬性爲TBS內核實驗性屬性，非 TBS 內核不支持)。TBS H5同層播放器接入規範  示例: "h5"
x5_fullscreen	String	無	經過 video 屬性 「x5-video-player-fullscreen」 聲明視頻播放時是否進入到 TBS 的全屏模式，支持的值：true (該屬性爲 TBS 內核實驗性屬性，非 TBS 內核不支持) 。  示例: "true"
x5_orientation	Number	無	經過 video 屬性 「x5-video-orientation」 聲明 TBS 播放器支持的方向，可選值：0（landscape 橫屏）, 1：（portraint豎屏）, 2：（landscape | portrait跟隨手機自動旋轉）。 (該屬性爲 TBS 內核實驗性屬性，非 TBS 內核不支持) [v2.2.0+]  示例: 0
wording	Object	無	自定義文案  示例: { 2032: '請求視頻失敗，請檢查網絡'}
listener	Function	無	事件監聽回調函數，回調函數將傳入一個JSON格式的對象  示例: function(msg){ //進行事件處理  }

實例方法列表

下面列出了播放器實例支持的方法。

方法	參數	返回值	說明	示例
play()	無	無	開始播放視頻	player.play()
pause()	無	無	暫停播放視頻	player.pause()
togglePlay()	無	無	切換視頻播放狀態	player.togglePlay()
mute(muted)	{Boolean} [可選]	true,false {Boolean}	切換靜音狀態，不傳參則返回當前是否靜音	player.mute(true)
volume(val)	{int} 範圍：0~1 [可選]	範圍：0~1	設置音量，不傳參則返回當前音量	player.volume(0.3)
playing()	無	true,false {Boolean}	返回是否在播放中	player.playing()
duration()	無	{int}	獲取視頻時長  備註：只適用於點播	player.duration()
currentTime(time)	{int} [可選]	{int}	設置視頻播放時間點，不傳參則返回當前播放時間點  備註：只適用於點播	player.currentTime()
fullscreen(enter)	{Boolean} [可選]	true,false {Boolean}	調用全屏接口(Fullscreen API)，不支持全屏接口時使用僞全屏模式，不傳參則返回值當前是不是全屏  備註：移動端系統全屏沒有提供api，也沒法獲取系統全屏狀態	player.fullscreen(true)
buffered()	無	0~1	獲取視頻緩衝數據百分比  備註：只適用於點播	player.buffered()

進階攻略

這裏介紹一些視頻播放器SDK的進階使用方法

開啓優先H5播放模式

TcPlayer 是採用 H5 <video> 和 Flash 相結合的方式來進行視頻播放的，在不一樣的播放環境中，播放器會選擇默認最合適的播放方案。

雖然目前瀏覽器廠商已經開始逐步放棄對 Flash 插件的支持，可是在國內仍有大量的瀏覽器不支持 MSE，在播放 FLV HLS（m3u8）時沒法切換到H5 <video>的播放模式，而播放 RTMP 必須使用 Flash 模式才能夠播放，
所以 TcPlayer 還是默認優先啓用 Flash 播放模式，若是在檢測到 Flash 插件不可用的狀況下，將採用 H5 <video>進行播放。

默認 Flash 模式的緣由是 Flash 支持的視頻格式最廣，而H5 <video>默認只支持 MP4（h.264）（其餘非騰訊雲提供的視頻格式這裏就不列出了），在特定條件下才能支持HLS（m3u8）、FLV。

從2.2.0版本開始，提供了能夠設置播放模式優先級的屬性，若是想優先採用H5 <video>播放模式，須要把 flash 屬性設置爲 false ，這樣在播放時默認將啓用H5 <video>播放，若是H5 <video>不可用將採用 Flash 播放，若是沒有檢測到 Flash 插件將會提示「當前系統環境不支持播放該視頻格式」

監聽事件

TcPlayer 是採用 H5 <video> 和 Flash 相結合的方式來進行視頻播放，因爲兩種方式播放視頻時觸發的事件不盡相同，因此咱們以 H5 <video> 的規範爲準，對 Flash 的播放事件作了必定程度的轉換，以實現播放事件命名的統一。TcPlayer 對這兩種播放方式所觸發的原生事件進行了捕獲和透傳。

H5事件參考列表
Flash事件參考列表

統一後的事件列表

error
timeupdate
load loadedmetadata loadeddata progress fullscreen play playing pause ended seeking seeked resize volumechange 

注意事項：

• 若是經過系統控制欄進行全屏，將沒法監聽到 fullscreen 事件。

Flash模式下特有的事件

netStatus

備註：因爲Flash的黑盒特性以及H5視頻播放標準在各個平臺終端的實現不一致性，事件的觸發方式和結果會有差別，開發過程當中能夠留意這些差別

在非自動播放的條件下，加載視頻至待播放狀態，移動端和PC Flash 觸發的事件區別
移動端：

PC Flash：

備註：以上是兩種平臺的差別，然而在移動端的各類設備和 APP 之間一樣存在差別。

應用案例：

經過事件監聽，能夠進行播放失敗重連，在線例子連接

更新日誌

TcPlayer在不斷的更新以及完善中，爲了方便你們瞭解版本狀況，下面列出的是TcPlayer發佈的主版本介紹，而一些歷史bug修復，小功能版本沒有列出。

日期	版本	更新內容
2016.12.28	2.0.0	首個版本
2017.3.4	2.1.0	至2017.6.30，經歷數次的迭代開發逐步趨於穩定，目前文檔的功能描述中，若是沒有特殊說明，皆基於此版本。
2017.6.30	2.2.0	1. 增長控制播放環境判斷的參數： flash、h5_flv、x5_player。 2.調整播放器初始化邏輯，優化錯誤提示效果。 3.增長flv.js支持，在符合條件的狀況下能夠採用flv.js播放 flv  4.支持x5-video-orientation屬性， 5.增長播放環境判斷邏輯，可經過參數調整H5與Flash的優先級，以及是否啓用TBS播放。 6.啓用版本號發佈方式，避免影響舊版本的使用者。 7.優化事件觸發的時間戳，統一爲標準時間。 8.bug修復

常見問題

• TcPlayer支持哪些瀏覽器？

  TcPlayer 通過測試並支持的瀏覽器有，桌面端：IE10+、Edge、Chrome、Firefox、QQ瀏覽器，MAC Safari，移動端：Android4.4+，iOS8.0+，微信、手機QQ、QQ瀏覽器、Chrome、Safari。
  如需支持IE八、IE9瀏覽器須要在引入播放器腳本前，引入Polyfill腳本。以下所示：

  <!--[if lt IE 9]> <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-shim.js" charset="utf-8"></script> <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-sham.js" charset="utf-8"></script> <![endif]--> <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>; 

• 爲何在移動端 TcPlayer 全屏後沒法使視頻全屏，仍然會顯示瀏覽器的界面？

  首先要了解一些背景知識，TcPlayer 提供的全屏方案是 Fullscreen API + 僞全屏的方式，若是瀏覽器支持 Fullscreen API 那麼進入全屏時，視頻容器將會鋪滿屏幕，控制欄是 TcPlayer 提供的控制欄，如圖所示
  
  （Android Chrome）

  若是瀏覽器不支持Fullscreen API 則會進入僞全屏模式，如圖所示：
  
  （左：Android 微信，右：iOS 微信）

  這兩種全屏模式顯示的控制欄都是 TcPlayer 提供的控制欄，進入方式都是經過點擊控制欄的全屏按鈕，或者 TcPlayer 提供的全屏方法實現的。
  然而在移動端不必定能夠顯示 TcPlayer 提供的控制欄，大部分狀況下移動端webview會劫持視頻播放，並使用 webview 提供的控制欄，這樣就沒法顯示 TcPlayer 的控制欄，也沒法使用 TcPlayer 提供的全屏方案。如圖所示：
  
  （左：Android 微信，TBS劫持視頻播放，右：iOS QQ瀏覽器劫持視頻播放）
  進入全屏後：
  
  （左：Android 微信，右：iOS QQ瀏覽器）
  能夠看到控制欄與 TcPlayer 是不一樣的，而這種全屏方式是沒有接口提供給 JS 調用的，因此 TcPlayer 沒法實現這樣的全屏方式。
  （咱們一般會把視頻區域鋪滿屏幕的全屏模式稱爲系統全屏，而視頻區域鋪滿瀏覽器的頁面可視區域稱爲僞全屏）
  綜上所訴若是全屏後看到瀏覽器的界面則是進入了僞全屏，若是想在移動端全屏時必須進入系統全屏，只能使用系統提供的控制欄，選擇控制欄類型能夠經過 TcPlayer 的 controls 屬性進行設置。

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

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

• 爲何我本身的 div 沒法在蓋在視頻上？

  不一樣瀏覽器對於 <video> 標籤的實現方案不一樣，好比您的網頁若是是從QQ或者微信裏打開的（這裏說的是Android系統下），那麼極高的機率會使用QQ或微信捆綁的X5瀏覽器內核，也就是QQ瀏覽器內核，該團隊考慮當時處於某些緣由的考慮，採用了「視頻 <video> 標籤必定要處於最上層」的實現方案（相關信息參考QQ瀏覽器文檔說明），不過最近經過公司內部的各類協調，QQ瀏覽器團隊正在逐步修改這個策略，您在看到這個文檔時，可能最新版本的X5瀏覽器內核已經解決了這個問題。

• 爲何設置封面無效？

  這個問題的緣由和上一個問題「 div 沒法在蓋在視頻上」是同樣的，除非瀏覽器容許元素可以覆蓋 <video> 標籤，否則封面將會沒法顯示。

• 爲何在某些移動端瀏覽器視頻會默認全屏播放？

  若是您的視頻是在APP內實現內聯播放（即您本身的App包裝一個iOS的 webview 控件，用此控件顯示網頁，這種模式下您能夠對 webview 進行一些細節定製，它的表現能夠和標準 safari 瀏覽器有所不一樣），能夠經過在 HTML 中的 <video> 標籤設置 webkit-playsinline 屬性(若是在 iOS10 下，則設置爲 playsinline 屬性)，同時 WebView 須要設置 allowsInlineMediaPlayback，這樣頁面在APP裏打開時，視頻就能以非全屏模式（即內聯的方式）播放。

  若是您的頁面是在Safari下打開的，目前iOS10如下版本的Safari是沒法禁止視頻自動全屏播放的，iOS10能夠經過前面說的方法（爲 <video> 標籤設置 playsinline 屬性）實現非全屏模式（即內聯的方式）播放。咱們的播放器已經自動加上這個屬性，只須要終端支持便可。

  若是是Android終端，衆所周知Android系統有各類各樣的定製版本，每一個版本對 <video> 標籤的實現都有差異，並無一個完整的統一標準，因此在Android上播放視頻所展示的一致性，相比iOS要差不少。按照現有通用的辦法，播放器已經自動加上 webkit-playsinline playsinline 屬性，只須要終端支持便可。

• 爲何在移動端瀏覽器視頻沒法自動播放？

  在移動端 WEB 自動播放視頻只有兩個辦法，經過設置 <video> 標籤 autoplay 屬性 或者調用 <video> 標籤提供的 play() 方法，然而現實是在移動端WEB中視頻自動播放一直是被禁止的，目前通用的辦法是經過用戶手動觸發播放（例如監聽用戶的點擊事件並調用 play()方法）。除此以外不排除一些特殊定製的 webview 支持 <video> 標籤 autoplay 屬性或者經過其餘特殊的函數調用實現自動播放，那麼在這類 Webview 下打開頁面就有可能自動播放。咱們的播放器已經在 autoplay 設置爲 true 的狀況下，爲 <video> 標籤加上 autoplay 屬性，只要終端支持便可。

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

  從Chrome 42版本開始將再也不自動播放Flash（谷歌購買了WebRTC並進行開源並非沒有想法的）, 只對主要的Flash內容進行自動播放，其它的Flash內容將被暫停播放，除非用戶決定去手動點開它。

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

  在移動端瀏覽器中播放直播視頻，目前只支持hls(m3u8)協議，所以須要確認直播拉流地址是否有hls(m3u8)拉流url，若是您只給咱們的播放器一個flv或者rtmp的地址，是沒有什麼辦法在手機上觀看的。