COS 音視訊實踐｜播放多場景下的 COS 視訊檔案
導語
上回 （COS音視訊實踐｜多種姿勢讓你的視訊“跑”起來）說道，基於您的實際場景，可以選擇不同的方式，在 Web 瀏覽器端播放您的 COS 視訊檔案。本文將基於騰訊雲超級播放器，帶您體驗播放多場景下的 COS 視訊檔案。
一. 實踐步驟
- 準備您的 COS 視訊檔案連結，您需要：
1.1 建立一個儲存桶；
1.2 上傳物件；
1.3 在物件資訊詳情裡複製物件地址；
- 在頁面中引入播放器樣式檔案與指令碼檔案：
<!--播放器樣式檔案--> <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/tcplayer.min.css" rel="stylesheet"/> <!--如果需要在 Chrome 和 Firefox 等現代瀏覽器中通過 H5 播放 HLS 格式的視訊，需要在 tcplayer.v4.2.2.min.js 之前引入 hls.min.0.13.2m.js。--> <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/libs/hls.min.0.13.2m.js"></script> <!--播放器指令碼檔案--> <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/tcplayer.v4.2.2.min.js"></script>
建議在正式使用播放器 SDK 時，自行部署以上相關靜態資源(https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/release.zip)
部署解壓後的資料夾，不能調整資料夾裡面的目錄，避免資源互相引用異常。
- 設定播放器容器節點：
在需要展示播放器的頁面位置加入播放器容器。例如，在 index.html 中加入如下程式碼（容器 ID 以及寬高都可以自定義）。
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline> </video>
說明：
- 播放器容器必須為
- 示例中的 player-container-id 為播放器容器的 ID，可自行設定。
- 播放器容器區域的尺寸，建議通過 CSS 進行設定，通過 CSS 設定比屬性設定更靈活，可以實現例如鋪滿全屏、容器自適應等效果。
- 示例中的 preload 屬性規定是否在頁面載入後載入視訊，通常為了更快的播放視訊，會設定為 auto，其他可選值：meta（當頁面載入後只載入元資料），none（當頁面載入後不載入視訊），移動端由於系統限制不會自動載入視訊。
- playsinline 和webkit-playsinline 這幾個屬性是為了在標準移動端瀏覽器不劫持視訊播放的情況下實現行內播放，此處僅作示例，請按需使用。
- 設定 x5-playsinline 屬性在 TBS 核心會使用 X5 UI 的播放器。
- 初始化播放器，並傳入 COS 視訊檔案物件地址 URL：
var player = TCPlayer('player-container-id', {}); // player-container-id 為播放器容器 ID，必須與 html 中一致
player.src(cosObjectUrl); // url 播放地址
二. 具體播放場景
場景一：播放公有讀視訊檔案
儲存桶公有讀許可權包括兩種：公有讀私有寫、公有讀寫。其中，公有讀私有寫許可權下，任何人（包括匿名訪問者）都對該儲存桶中的物件有讀許可權，但只有儲存桶建立者及有授權的賬號才對該儲存桶中的物件有寫許可權。公有讀寫許可權下，任何人（包括匿名訪問者）都對該儲存桶中的物件有讀許可權和寫許可權，不推薦使用。
播放公有讀許可權的視訊檔案的步驟為：
1、將儲存桶設定為公有讀；
2、上傳視訊檔案後，複製物件地址；
3、結合前面的步驟流程，使用 TCPlayer 播放公有讀視訊檔案地址，程式碼如下：
<script>
var tcplayer = TCPlayer("player-container-id", {})
tcplayer.src('https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/test.mp4')
</script>
4、效果：
場景二：播放私有讀視訊檔案
為了保障儲存桶資料的安全效能，一般推薦將儲存桶設為私有讀寫許可權。此時只有該儲存桶的建立者及有授權的賬號才對該儲存桶中的物件有讀寫許可權，其他任何人對該儲存桶中的物件都沒有讀寫許可權。
播放私有讀許可權的視訊檔案的步驟為：
1、將儲存桶設定為私有讀；
2、由於儲存桶為私有讀，因此訪問的物件地址需要攜帶上簽名，有三種方式：
方法一：在物件資訊中複製臨時連結，該臨時連結攜帶有效期為1小時的簽名引數；
方法二：利用 COS 簽名工具（https://cloud.tencent.com/document/product/436/30442），計算您的物件簽名；
方法三：利用 API 或對應 SDK，計算您的物件簽名（參考文件：
https://cloud.tencent.com/document/product/436/7778#sdk-.E7.AD.BE.E5.90.8D.E5.AE.9E.E7.8E.B0)；
以上三種方法中，正式使用時推薦使用方法三的 SDK 簽名方式，更加方便安全地計算您的物件簽名。
3、結合前面的步驟流程，利用 TCPlayer 播放攜帶簽名的私有讀視訊檔案地址，完整程式碼如下：
<script>
var tcplayer = TCPlayer("player-container-id", {})
tcplayer.src('https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/test.mp4?<Authorization>')
</script>
4、效果：
場景三：播放公有讀 HLS 視訊檔案
HTTP Live Streaming（HLS）是一個由蘋果公司提出的基於 HTTP 的流媒體網路傳輸協議。是蘋果公司 QuickTime X 和 iPhone 軟體系統的一部分。它的工作原理是把整個流分成一個個小的基於 HTTP 的檔案來下載，每次只下載一些。當媒體流正在播放時，客戶端可以選擇從許多不同的備用源中以不同的速率下載同樣的資源，允許流媒體會話適應不同的資料速率。在開始一個流媒體會話時，客戶端會下載一個包含元資料的 extended M3U m3u8playlist 檔案，用於尋找可用的媒體流。
物件儲存（Cloud Object Storage，COS）資料處理提供了 HLS 視訊轉碼的功能。您可以結合 COS 資料工作流轉碼任務，播放 HLS 視訊檔案。
1、建立音視訊轉碼任務；
2、選擇系統模版中的任一 HLS 轉碼任務，配置任務生成 HLS 視訊檔案；
3、複製生成的 m3u8 檔案物件地址；
4、結合前面的步驟流程，利用TCPlayer播放公有讀 HLS 視訊檔案地址，完整程式碼如下：
<script>
var tcplayer = TCPlayer("player-container-id", {})
tcplayer.src('https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/test.m3u8')
</script>
5、效果：
場景四：播放私有讀 HLS 視訊檔案
在場景三的基礎上，為了保證儲存桶資料的安全性，我們把儲存桶設定為私有讀寫許可權，同時結合 PM3U8 API，進行私有 HLS 視訊檔案的播放，具體步驟如下：
1、將儲存桶設定為私有讀；
2、由於儲存桶是私有的，所以需要給每塊TS分片設定請求籤名。COS提供了 PM3U8 API，讓你在請求m3u8檔案時，攜帶上相關的引數?ci-process=pm3u8&expires=3600，返回的檔案中的 TS 分片請求路徑就能攜帶上對應的請求籤名。
2.1 普通 m3u8 檔案的請求結果如下，ts分片不帶簽名：
2.2 利用 PM3U8 API，請求的結果如下，ts分片攜帶簽名：
2.3 結合前面的步驟流程，利用TCPlayer播放 私有讀 HLS 視訊檔案地址，完整程式碼如下：
<script>
var tcplayer = TCPlayer("player-container-id", {})
tcplayer.src('https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/test.m3u8?ci-process=pm3u8&expires=3600&sign')
</script
2.4 效果：
三. 體驗
以上實踐，我們還準備了一個線上體驗demo(https://ci-exhibition.cloud.tencent.com/tools/video/)，歡迎大家體驗。
展望
本期「COS 音視訊實踐到此結束」，歡迎大家體驗使用，下期精彩內容，敬請期待。