COS 音视频实践 | 多种姿势让你的视频“跑”起来

导语

随着4G/5G时代的到来，短视频/直播行业开始流行，音视频逐渐成为信息传播中流量占比最大的部分。腾讯云对象存储（COS）作为可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务，早已不是一个简单的对象存储服务，结合数据万象（CI）的数据处理能力，同时具备丰富的音视频能力。

本期 COS 音视频实践，将带您用多种姿势让您存储在 COS 上的视频在 Web 浏览器上“跑”起来，在浏览器下用多款播放器播放您的视频文件。

一. Web 视频播放器介绍

1. HTML <video>：<video> 标签是一个原生的 HTML 节点元素，用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。

2. Videojs：Videojs 是专为 HTML5 世界构建的网络视频播放器，支持 HTML5 视频和现代流媒体格式，是一款功能强大、高可定制的播放器。

3. DPlayer：DPlayer 是一款可爱的 HTML5 弹幕视频播放器，可帮助人们轻松构建视频和弹幕，是一款功能丰富、开箱即用的播放器。

4. TCPlayer：腾讯云点播超级播放器基于 HTML 的 <video> 标签，使用多种播放策略来实现视频播放以及多平台播放效果的统一。

5. Plyr：Plyr 是一款简单、轻量级、可访问和可定制的 HTML5 媒体播放器，支持现代浏览器。

6. griffith：griffith 是一款基于 React 的 Web 视频播放器，支持React、原生 JavaScript方式，使用简单，开箱即用。

二. COS 视频能力的支持情况对比

三. 以播放器为例，

实现播放 COS 公有读视频文件

3.1. Videojs

引入对应的视频文件和样式文件；

代码语言：javascript复制

<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 视频文件对象地址；

代码语言：javascript复制

  <video    id="my-video"    class="video-js"    controls    preload="auto"    width="640"    height="264"  >    <source src="https://video-public-1259789488.cos.ap-guangzhou.myzijiebao.com/test.mp4" type="video/mp4" />  </video>

3.2. DPlayer

引入对应的视频文件；

代码语言：javascript复制

<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

设置播放器节点；

代码语言：javascript复制

<div id="dplayer"></div>

初始化播放器，并设置 COS 视频文件对象地址；

代码语言：javascript复制

const dp = new DPlayer({    container: document.getElementById('dplayer'),    video: {        url: 'https://video-public-1259789488.cos.ap-guangzhou.myzijiebao.com/test.mp4',    },});

3.3. TCPlayer

引入对应的视频文件和样式文件；

代码语言：javascript复制

<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>

设置播放器节点；

代码语言：javascript复制

<video id="player-container-id" preload="auto" width="600" height="400" playsinline webkit-playsinline x5-playsinline></video>

代码语言：javascript复制

初始化播放器，并设置 COS 视频文件对象地址；

代码语言：javascript复制

var tcplayer = TCPlayer("player-container-id", {})tcplayer.src('https://video-public-1259789488.cos.ap-guangzhou.myzijiebao.com/test.mp4')

代码语言：javascript复制

3.4. Plyr

引入对应的视频文件和样式文件；

代码语言：javascript复制

<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 视频文件对象地址；

代码语言：javascript复制

<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.myzijiebao.com/test.mp4" type="video/mp4" size="576"></div>

初始化播放器；

代码语言：javascript复制

const player = new Plyr('video', {captions: {active: true}});window.player = player;

3.5. griffith

引入对应的视频文件；

代码语言：javascript复制

<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>

代码语言：javascript复制

设置播放器节点；

代码语言：javascript复制

<div id="griffith-player"></div>

初始化播放器，并设置 COS 视频文件对象地址；

代码语言：javascript复制

const sources = {    play_url: 'https://video-public-1259789488.cos.ap-guangzhou.myzijiebao.com/test.mp4',}
Griffith.createPlayer(document.getElementById('griffith-player')).render({sources}

3.6. HTML <video> 标签

初始化 video 标签，并设置 COS 视频文件对象地址；

代码语言：javascript复制

<video controls width="250">    <source src="https://video-public-1259789488.cos.ap-guangzhou.myzijiebao.com/test.mp4"            type="video/mp4"></video>

四. COS 控制台视频预览功能

此外，COS 控制台还集成了视频的预览功能，您可以在 COS 控制台方便地预览您的视频文件。登陆腾讯云 COS 控制台，选择存储桶进入文件列表页，点击操作栏的预览按钮，即可进入预览模式。