導語
上回 （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 音視頻實踐到此結束」，歡迎大家體驗使用，下期精彩內容，敬請期待。