前言

你是否遇到过这样的场景：

兴致勃勃地观看心爱的视频，正当到了激动人心的高潮部分，却突然因为网速过差被迫陷入“转圈圈”的人生以及社会的大思考中。

又或者是身为网速畅通无阻的vip玩家，却因为视频只有低劣画质而仰天长叹，为这尊贵的网络资源无用武之地感到惋惜。

以上种种，是否是你所遇到的视频网站的各种痛点缩影？如果是，那么福音来啦！本期 COS 音视频实践，将利用对象存储（Cloud Object Storage，COS）数据处理基于数据万象 CI 提供的HLS 自适应多码率功能，助你播放多清晰度视频，从此彻底摆脱“转圈圈”和低劣画质视频的困扰：结合自身的网速情况，无缝切换视频清晰度！

一. 何为 HLS 自适应多码率

COS 数据处理自适应多码率功能可以将视频文件转码并打包生成自适应码流输出文件，它的特点是包含多个码率的音视频文件和一个描述性主索引文件（manifest），播放器能够根据当前带宽，动态选择最合适的码率播放。目前应用最广泛的自适应码流格式，是 Master Playlist 格式下的 HLS。

二. 基于 COS 数据工作流，快速完成 HLS 自适应多码率

COS 数据工作流，帮助您快速、灵活、按需搭建视频处理流程。每个工作流与输入存储桶的一个路径绑定，当视频文件上传至该路径时，该媒体工作流就会被自动触发，执行指定的处理操作，并将处理结果自动保存至输出存储桶的指定路径下。此外，若针对已存在于存储桶中的文件，您可创建任务进行媒体处理、语音识别、文档处理等操作，快速帮您完成单任务处理。

1.登录对象存储控制台（https://console.cloud.tencent.com/cos5）进入存储桶管理页面并找到对应存储桶；

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时，自行部署以上相关静态资源，单击下载播放器资源（https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/release.zip）。部署解压后的文件夹，不能调整文件夹里面的目录，避免资源互相引用异常。

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 端：复制并访问链接即可进行体验；

https://video-public-1259789488.cos.apguangzhou.myqcloud.com/multi-definition/demo.html

COS 音视频实践｜数据工作流助你播放多清晰度视频相关推荐

Android Webview完美支持播放各种视频。（解决无法播放优酷视频的问题以及周末无法播放优酷视频的问题）
通常我们会有这样的业务需求:手机端展示某个H5页面,H5页面来源可能是优酷.56.爱奇艺等某个视频网站的一个视频.用户可以直接操作观看.很简单.但是很容易出现问题.比如属性没有处理好.会出现可以加载5 ...
为什么有的视频下载了一点就能播放，有的视频不下载完就播放不了
作者:Happy Ennding 链接:https://www.zhihu.com/question/54673095/answer/140528753 来源:知乎著作权归作者所有,转载请联系作者获 ...
html中显示优酷视频,html5 - h5页面上如何播放优酷视频
巴扎黑2017-04-17 12:10:441楼看到上面的答案,可能有人会有雾水.我来补充一下. 如果使用ueditor,kineditor等富文本编辑器插入的视频,其默认是插入swf结尾的url ...
音视频进阶教程｜实现直播间的自定义视频渲染
1 自定义视频渲染的功能简介自定义视频渲染指的是 SDK 向外部提供本地预览及远端拉流的视频帧数据,供用户自行渲染. 当开发者业务中出现以下情况时,推荐使用即构实时音视频SDK 的自定义视频渲染功 ...
视频监控数据价值你还没有重视吗？
多年以来,平安城市的大型项目在运营和公安实践中,通常会遇到以下情况的发生:缺少视频信息情报的标准化生成方法,进而缺少利用视频信息情报指导侦查.破案的新型警务工作模式.现在视频监控的应用已融入民警的日常 ...
视频大数据技术在智慧城市建设中的应用
现代社会的信息量正以飞快的速度增长,这些信息里又积累着大量的数据.预计到 2025年,每年产生的数据信息将会有超过 1/3 的内容驻留在云平台中或借助云平台处理.我们需要对这些数据进行分析和处理,以 ...
web 网页播放3gp的视频
昨天需要在视频管理平台上加一个3gp视频的播放功能,而且我还不想装quicktime和vlc的插件,只想用js来做,这样用户感觉会好点,但是搜了n多,都不支持3gp的格式,最后终于找到了这个酷播,网址 ...
html视频分屏插件,视频分屏效果制作可在同一个画面播放多个视频的操作步骤详解...
我们在看电影电视剧的时候,当剧情是两个角色在相同时间不同地点发生着什么事情的时候,在视频画面就会出现分屏效果,就是在同一个画面播放着两个视频的效果,小编觉得这个效果很有意思,而且实现起来不难,所以今天 ...
在浏览器中使用VLC插件实现播放RTSP流视频
在浏览器中使用VLC插件实现播放RTSP流视频一.安装VLC插件二.编写测试html文件三.生成一个测试用RTSP流视频四.在浏览器中播放RTSP流视频五.VLC插件知识扩展 1.VLC插件 ...

COS 音视频实践｜数据工作流助你播放多清晰度视频

前言

一. 何为 HLS 自适应多码率

二. 基于 COS 数据工作流，快速完成 HLS 自适应多码率

三. 播放自适应多码率视频

四. 体验

COS 音视频实践｜数据工作流助你播放多清晰度视频相关推荐

最新文章

热门文章

COS 音视频实践 ｜ 数据工作流助你播放多清晰度视频

​前言

一. 何为 HLS 自适应多码率

二. 基于 COS 数据工作流，快速完成 HLS 自适应多码率

三. 播放自适应多码率视频

四. 体验

COS 音视频实践 ｜ 数据工作流助你播放多清晰度视频相关推荐

最新文章

热门文章

COS 音视频实践｜数据工作流助你播放多清晰度视频

前言

COS 音视频实践｜数据工作流助你播放多清晰度视频相关推荐