关于腾讯云:COS-音视频实践｜播放多场景下的-COS-视频文件

导语

上回（COS 音视频实际|多种姿态让你的视频“跑”起来）说道，基于您的理论场景，能够抉择不同的形式，在 Web 浏览器端播放您的 COS 视频文件。本文将基于腾讯云超级播放器，带您体验播放多场景下的 COS 视频文件。

一. 实际步骤

1. 筹备您的 COS 视频文件链接，您须要：

1.1 创立一个存储桶；

1.2 上传对象；

1.3 在对象信息详情里复制对象地址；

2. 在页面中引入播放器款式文件与脚本文件：

<!-- 播放器款式文件 -->
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/tcplayer.min.css" rel="stylesheet"/>
<!-- 如果须要在 Chrome 和 Firefox 等古代浏览器中通过 H5 播放 HLS 格局的视频，须要在 tcplayer.v4.2.2.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/libs/hls.min.0.13.2m.js"></script>
<!-- 播放器脚本文件 -->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/tcplayer.v4.2.2.min.js"></script>

倡议在正式应用播放器 SDK 时，自行部署以上相干动态资源 (https://web.sdk.qcloud.com/pl…)

部署解压后的文件夹，不能调整文件夹外面的目录，防止资源相互援用异样。

3. 设置播放器容器节点：

在须要展现播放器的页面地位退出播放器容器。例如，在 index.html 中退出如下代码（容器 ID 以及宽高都能够自定义）。

<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>

阐明：

• 播放器容器必须为 <video> 标签。
• 示例中的 player-container-id 为播放器容器的 ID，可自行设置。
• 播放器容器区域的尺寸，倡议通过 CSS 进行设置，通过 CSS 设置比属性设置更灵便，能够实现例如铺满全屏、容器自适应等成果。
• 示例中的 preload 属性规定是否在页面加载后载入视频，通常为了更快的播放视频，会设置为 auto，其余可选值：meta（当页面加载后只载入元数据），none（当页面加载后不载入视频），挪动端因为零碎限度不会主动加载视频。
• playsinline 和‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍webkit-playsinline 这几个属性是为了在规范挪动端浏览器不劫持视频播放的状况下实现行内播放，此处仅作示例，请按需应用。
• 设置 x5-playsinline 属性在 TBS 内核会应用 X5 UI 的播放器。

4. 初始化播放器，并传入 COS 视频文件对象地址 URL：

   var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中统一
   player.src(cosObjectUrl); // url 播放地址 

二. 具体播放场景

场景一：播放私有读视频文件

存储桶私有读权限包含两种： 私有读公有写、私有读写 。其中，私有读公有写权限下，任何人（包含匿名访问者）都对该存储桶中的对象有读权限，但只有存储桶创建者及有受权的账号才对该存储桶中的对象有写权限。私有读写权限下，任何人（包含匿名访问者）都对该存储桶中的对象有读权限和写权限，不举荐应用。

播放私有读权限的视频文件的步骤为：
1、将存储桶设置为私有读；

2、上传视频文件后，复制对象地址；

3、联合后面的步骤流程，应用 TCPlayer 播放私有读视频文件地址，代码如下：

<script>
     var tcplayer = TCPlayer("player-container-id", {})
     tcplayer.src('https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/test.mp4')
</script>

4、成果：

场景二：播放公有读视频文件

为了保障存储桶数据的平安性能，个别举荐将存储桶设为公有读写权限。此时只有该存储桶的创建者及有受权的账号才对该存储桶中的对象有读写权限，其余任何人对该存储桶中的对象都没有读写权限。

播放公有读权限的视频文件的步骤为：

1、将存储桶设置为公有读；

2、因为存储桶为公有读，因而拜访的对象地址须要携带上签名，有三种形式：

办法一：在对象信息中复制长期链接，该长期链接携带有效期为 1 小时的签名参数；

办法二：利用 COS 签名工具（https://cloud.tencent.com/doc…），计算您的对象签名；

办法三：利用 API 或对应 SDK，计算您的对象签名（参考文档：
https://cloud.tencent.com/doc…)；

以上三种办法中，正式应用时举荐应用办法三的 SDK 签名形式，更加不便平安地计算您的对象签名。

3、联合后面的步骤流程，利用 TCPlayer 播放携带签名的公有读视频文件地址，残缺代码如下：

<script>
     var tcplayer = TCPlayer("player-container-id", {})
     tcplayer.src('https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/test.mp4?<Authorization>')
</script>

4、成果：

场景三：播放私有读 HLS 视频文件

HTTP Live Streaming（HLS） 是一个由苹果公司提出的基于 HTTP 的流媒体网络传输协定。是苹果公司 QuickTime X 和 iPhone 软件系统的一部分。它的工作原理是把整个流分成一个个小的基于 HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端能够抉择从许多不同的备用源中以不同的速率下载同样的资源，容许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个蕴含元数据的 extended M3U m3u8playlist 文件，用于寻找可用的媒体流。

对象存储（Cloud Object Storage，COS）数据处理提供了 HLS 视频转码的性能。您能够联合 COS 数据工作流转码工作，播放 HLS 视频文件。

1、创立音视频转码工作；

2、抉择零碎模版中的任一 HLS 转码工作，配置工作生成 HLS 视频文件；

3、复制生成的 m3u8 文件对象地址；

4、联合后面的步骤流程，利用 TCPlayer 播放私有读 HLS 视频文件地址，残缺代码如下：

<script>
     var tcplayer = TCPlayer("player-container-id", {})
     tcplayer.src('https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/test.m3u8')
</script>

5、成果：

场景四：播放公有读 HLS 视频文件

在场景三的根底上，为了保障存储桶数据的安全性，咱们把存储桶设置为公有读写权限，同时联合 PM3U8 API，进行公有 HLS 视频文件的播放，具体步骤如下：

1、将存储桶设置为公有读；

2、因为存储桶是公有的，所以须要给每块 TS 分片设置申请签名。COS 提供了 PM3U8 API，让你在申请 m3u8 文件时，携带上相干的参数?ci-process=pm3u8&expires=3600，返回的文件中的 TS 分片申请门路就能携带上对应的申请签名。

2.1 一般 m3u8 文件的申请后果如下，ts 分片不带签名：

2.2 利用 PM3U8 API，申请的后果如下，ts 分片携带签名：

2.3 联合后面的步骤流程，利用 TCPlayer 播放 公有读 HLS 视频文件地址，残缺代码如下：

<script>
     var tcplayer = TCPlayer("player-container-id", {})
     tcplayer.src('https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/test.m3u8?ci-process=pm3u8&expires=3600&sign')
</script

2.4 成果：

三. 体验

以上实际，咱们还筹备了一个线上体验 demo(https://ci-exhibition.cloud.t…)，欢送大家体验。

瞻望

本期「COS 音视频实际到此结束」，欢送大家体验应用，下期精彩内容，敬请期待。