COS 音视频实践 | 多种姿势让你的视频“跑”起来腾讯云对象存储音视频视频

导语随着4G/5G时代的到来，短视频/直播行业开始流行，音视频逐渐成为信息传播中流量占比最大的部分。腾讯云对象存储（COS）作为可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务，早已不是一个简单的对象存储服务，结合数据万象（CI）的数据处理能力，同时具备丰富的音视频能力。
【COS 音视频实践 | 多种姿势让你的视频“跑”起来】本期 COS 音视频实践，将带您用多种姿势让您存储在 COS 上的视频在 Web 浏览器上“跑”起来，在浏览器下用多款播放器播放您的视频文件。
一.主流的 Web 视频播放器介绍 1.Html

初始化播放器，并设置 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