導語
隨着4G/5G時代的到來，短視頻/直播行業開始流行，音視頻逐漸成為信息傳播中流量占比最大的部分。騰訊雲對象存儲（COS）作為可容納海量數據且支持 HTTP/HTTPS 協議訪問的分布式存儲服務，早已不是一個簡單的對象存儲服務，結合數據萬象（CI）的數據處理能力，同時具備豐富的音視頻能力。
本期 COS 音視頻實踐，將帶您用多種姿勢讓您存儲在 COS 上的視頻在 Web 瀏覽器上“跑”起來，在瀏覽器下用多款播放器播放您的視頻文件。
一.主流的 Web 視頻播放器介紹
1.Html
2.Videojs：Videojs 是專為 HTML5 世界構建的網絡視頻播放器，支持 HTML5 視頻和現代流媒體格式，是一款功能強大、高可定制的播放器。
3.DPlayer：DPlayer 是一款可愛的 HTML5 彈幕視頻播放器，可幫助人們輕松構建視頻和彈幕，是一款功能豐富、開箱即用的播放器。
4.TCPlayer：騰訊雲點播超級播放器基於 HTML 的
5.Plyr：Plyr 是一款簡單、輕量級、可訪問和可定制的 HTML5 媒體播放器，支持現代瀏覽器。
6.griffith：griffith 是一款基於 React 的 Web 視頻播放器，支持React、原生 JavaScript方式，使用簡單，開箱即用。
二. COS 視頻能力的支持情況對比
三. 以播放器為例，實現播放 COS 公有讀視頻文件
3.1. Videojs
引入對應的視頻文件和樣式文件；
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
初始化播放器，並設置 COS 視頻文件對象地址；
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" > <source src="https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4" type="video/mp4" /> </video>
3.2. DPlayer
引入對應的視頻文件；
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
設置播放器節點；
<div id="dplayer"></div>
初始化播放器，並設置 COS 視頻文件對象地址；
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4',
},
});
3.3. TCPlayer
引入對應的視頻文件和樣式文件；
<link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
設置播放器節點；
<video id="player-container-id" preload="auto" width="600" height="400" playsinline webkit-playsinline x5-playsinline></video>
初始化播放器，並設置 COS 視頻文件對象地址；
var tcplayer = TCPlayer("player-container-id", {})
tcplayer.src('https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4')
3.4. Plyr
引入對應的視頻文件和樣式文件；
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
設置播放器節點，並設置 COS 視頻文件對象地址；
<div class="container">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
<source src="https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4" type="video/mp4" size="576">
</div>
初始化播放器；
const player = new Plyr('video', {captions: {active: true}});
window.player = player;
3.5. griffith
引入對應的視頻文件；
<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
設置播放器節點；
<div id="griffith-player"></div>
初始化播放器，並設置 COS 視頻文件對象地址；
const sources = {
play_url: 'https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4',
}
Griffith.createPlayer(document.getElementById('griffith-player')).render({sources}
3.6. HTML
初始化 video 標簽，並設置 COS 視頻文件對象地址；
<video controls width="250">
<source src="https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4"
type="video/mp4">
</video>
四. COS 控制台視頻預覽功能
此外，COS 控制台還集成了視頻的預覽功能，您可以在 COS 控制台方便地預覽您的視頻文件。登陸騰訊雲 COS 控制台，選擇存儲桶進入文件列表頁，點擊操作欄的預覽按鈕，即可進入預覽模式。
五. 總結
在這個開源播放器橫行的時代，各類播放器功能五花八門，選擇越多的同時，往往會令人眼花繚亂。但具體該使用哪款播放器將取決於業務需求，根據實際場景，選擇最合適您的播放方式。
例如，您需要對存儲在 COS 上的視頻進行方便預覽觀看，那么 COS 控制台上的視頻預覽功能可能適合您。
又例如，您需要一款開箱即用、功能豐富的播放器，那么 DPlayer 或 griffith 可能適合您。
雙例如，您需要一款高可定制、功能完備的播放器，那么 Videojs 或 Plyr 可能適合您。
叒例如，您需要一款支持多平台播放效果統一的播放器，那么 TCPlayer 可能適合您。
叕例如，您想要基於原生的 HTML 能力，自由地定制一款屬於您自己的播放器，那么 HTML
展望
我們計划開設“COS 音視頻實踐”系列文章，從具體的音視頻能力出發，為您奉上相關的解決方案，敬請期待。