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

导语

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

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

一.主流的 Web 视频播放器介绍

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

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 音视频实践”系列文章，从具体的音视频能力出发，为您奉上相关的解决方案，敬请期待。