前言
你是否遇到过这样的场景：
兴高采烈地观看可爱的视频，正当到了激动人心的低潮局部，却忽然因为网速过差被迫陷入“转圈圈”的人生以及社会的大思考中。
又或者是身为网速畅通无阻的 vip 玩家，却因为视频只有低劣画质而仰天长叹，为这尊贵的网络资源无用武之地感到可惜。
以上种种，是否是你所遇到的视频网站的各种痛点缩影？如果是，那么福音来啦！本期 COS 音视频实际，将利用对象存储（Cloud Object Storage，COS）数据处理基于数据万象 CI 提供的 HLS 自适应多码率性能，助你播放多清晰度视频，从此彻底解脱“转圈圈”和低劣画质视频的困扰：联合本身的网速状况，无缝切换视频清晰度！
一. 何为 HLS 自适应多码率
COS 数据处理自适应多码率性能能够将视频文件转码并打包生成自适应码流输入文件，它的特点是蕴含多个码率的音视频文件和一个描述性主索引文件（manifest），播放器可能依据以后带宽，动静抉择最合适的码率播放。目前利用最宽泛的自适应码流格局，是 Master Playlist 格局下的 HLS。
二. 基于 COS 数据工作流，疾速实现 HLS 自适应多码率
COS 数据工作流，帮忙您疾速、灵便、按需搭建视频解决流程。每个工作流与输出存储桶的一个门路绑定，当视频文件上传至该门路时，该媒体工作流就会被主动触发，执行指定的解决操作，并将处理结果主动保留至输入存储桶的指定门路下。此外，若针对已存在于存储桶中的文件，您可创立工作进行媒体解决、语音辨认、文档解决等操作，疾速帮您实现单任务解决。
1. 登录对象存储控制台进入存储桶治理页面并找到对应存储桶；
2. 在左侧导航栏中，抉择数据工作流 > 工作流 > 创立工作流，进入模板配置页面；
3. 输出工作流名称并抉择输出门路后，点击配置工作流的 ”+” 号，抉择 hls 自适应多码率后，点击保留；
4. 在打包配置弹窗中，抉择指标存储桶后点击确定。
5. 能够看到默认生成了一个视频子流，点击 ”+” 号，咱们再增加两个视频子流。
6. 三个视频子流对应的码率模版和相干配置别离如下：
7. 点击批改打包配置，别离对三个视频子流设置对应的带宽，播放器会依据以后带宽动静抉择适合的码率播放，为观看者带来良好的体验。这里咱们别离设置 400kps、700kps 和 1mps 带宽。
8. 工作流配置实现后，点击保留，并在工作流列表中启动该条工作流。
9. 到指定的存储桶输出门路中，上传视频文件，便能看到触发了工作流，并生成了对应的文件。其中，test_ib83541dd994d11ecac1b525400030d6f.m3u8文件是主索引文件，其余的 m3u8 文件是具体码率的索引文件，ts 是视频 HLS 视频分片。
三. 播放自适应多码率视频
利用腾讯云超级播放器，传入 COS 数据工作流生成的主索引 m3u8 文件对象地址，播放器先申请主索引 m3u8 文件，再依据文件内容申请对应码率的 m3u8 文件，并依据以后网络的带宽状态，主动切换适合的码率视频进行播放。
1. 在页面中引入播放器款式文件与脚本文件
<!-- 播放器款式文件 -->
<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 时，自行部署以上相干动态资源，单击下载播放器资源。部署解压后的文件夹，不能调整文件夹外面的目录，防止资源相互援用异样。
2. 设置播放器容器节点
在须要展现播放器的页面地位退出播放器容器。例如，在 index.html 中退出如下代码（容器 ID 以及宽高都能够自定义）。
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline></video>3. 初始化播放器并设置 URL
（1）获取后面 COS HLS 自适应多码率工作流成的主索引 m3u8 文件对象地址
（2）初始化播放器，并传入 m3u8 对象地址
var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中统一
player.src(https://examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com/path/example.m3u8); // m3u8 对象地址4. 成果
（1）胜利加载到主索引文件和多码率对应的 m3u8 文件
（2）能够依据用户以后网络带宽，自适应播放最合适的视频
（3）也能够手动切换到对应的码率进行播放
四. 体验
以上实际，咱们筹备了一个线上体验 demo，欢送大家体验~
1、挪动端：扫码即可进行体验；
2、web 端：点击链接即可进行体验；
— END —