COS 音视频实践 | 多种姿势让你的视频“跑”起来
导语
随着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
引入对应的视频文件和样式文件；
初始化播放器，并设置 COS 视频文件对象地址；
3.2. DPlayer
引入对应的视频文件；
设置播放器节点；
初始化播放器，并设置 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
引入对应的视频文件和样式文件；
设置播放器节点；
初始化播放器，并设置 COS 视频文件对象地址；
var tcplayer = TCPlayer("player-container-id", {})
tcplayer.src('https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4')
3.4. Plyr
引入对应的视频文件和样式文件；
设置播放器节点，并设置 COS 视频文件对象地址；
初始化播放器；
const player = new Plyr('video', {captions: {active: true}});
window.player = player;
3.5. griffith
引入对应的视频文件；
设置播放器节点；
初始化播放器，并设置 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 视频文件对象地址；
四. COS 控制台视频预览功能
此外，COS 控制台还集成了视频的预览功能，您可以在 COS 控制台方便地预览您的视频文件。登陆腾讯云 COS 控制台，选择存储桶进入文件列表页，点击操作栏的预览按钮，即可进入预览模式。
五. 总结
在这个开源播放器横行的时代，各类播放器功能五花八门，选择越多的同时，往往会令人眼花缭乱。但具体该使用哪款播放器将取决于业务需求，根据实际场景，选择最合适您的播放方式。
例如，您需要对存储在 COS 上的视频进行方便预览观看，那么 COS 控制台上的视频预览功能可能适合您。
又例如，您需要一款开箱即用、功能丰富的播放器，那么 DPlayer 或 griffith 可能适合您。
双例如，您需要一款高可定制、功能完备的播放器，那么 Videojs 或 Plyr 可能适合您。
叒例如，您需要一款支持多平台播放效果统一的播放器，那么 TCPlayer 可能适合您。
叕例如，您想要基于原生的 HTML 能力，自由地定制一款属于您自己的播放器，那么 HTML
展望
我们计划开设“COS 音视频实践”系列文章，从具体的音视频能力出发，为您奉上相关的解决方案，敬请期待。