实践:基于腾讯云播放器SDK,带您体验播放多场景下的 COS 视频文件

一. 实践步骤

1. 准备您的 腾讯云COS 视频文件链接,您需要:

1.1 创建一个存储桶;

1.2 上传对象;

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

注意:

目前腾讯云有COS特惠活动,新人1元起

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

建议在正式使用播放器 SDK 时,自行部署以上相关静态资(https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/release.zip) 部署解压后的文件夹,不能调整文件夹里面的目录,避免资源互相引用异常。

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

在需要展示播放器的页面位置加入播放器容器。例如,在 index.html 中加入如下代码(容器 ID 以及宽高都可以自定义)。

 

说明:

播放器容器必须为 <video> 标签。

示例中的 player-container-id 为播放器容器的 ID,可自行设置。

播放器容器区域的尺寸,建议通过 CSS 进行设置,通过 CSS 设置比属性设置更灵活,可以实现例如铺满全屏、容器自适应等效果。

示例中的 preload 属性规定是否在页面加载后载入视频,通常为了更快的播放视频,会设置为 auto,其他可选值:meta(当页面加载后只载入元数据),none(当页面加载后不载入视频),移动端由于系统限制不会自动加载视频。

playsinline 和webkit-playsinline这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放,此处仅作示例,请按需使用。

设置 x5-playsinline 属性在 TBS 内核会使用 X5 UI 的播放器。


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

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

二. 具体播放场景

场景一:播放公有读视频文件

存储桶公有读权限包括两种:公有读私有写、公有读写。其中,公有读私有写权限下,任何人(包括匿名访问者)都对该存储桶中的对象有读权限,但只有存储桶创建者及有授权的账号才对该存储桶中的对象有写权限。公有读写权限下,任何人(包括匿名访问者)都对该存储桶中的对象有读权限和写权限,不推荐使用。

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

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

2、上传视频文件后,复制对象地址;

3、结合前面的步骤流程,使用 TCPlayer 播放公有读视频文件地址,代码如下:

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

4、效果:

场景二:播放私有读视频文件

为了保障存储桶数据的安全性能,一般推荐将存储桶设为私有读写权限。此时只有该存储桶的创建者及有授权的账号才对该存储桶中的对象有读写权限,其他任何人对该存储桶中的对象都没有读写权限。

播放私有读权限的视频文件的步骤为:

1、将存储桶设置为私有读;


2、由于存储桶为私有读,因此访问的对象地址需要携带上签名,有三种方式:

方法一:在对象信息中复制临时链接,该临时链接携带有效期为1小时的签名参数;


方法二:利用 COS 签名工具,计算您的对象签名;

方法三:利用 API 或对应 SDK,计算您的对象签名;

以上三种方法中,正式使用时推荐使用方法三的 SDK 签名方式,更加方便安全地计算您的对象签名。

3、结合前面的步骤流程,利用 TCPlayer 播放携带签名的私有读视频文件地址,完整代码如下:

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

4、效果:


场景三:播放公有读 HLS 视频文件

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

对象存储(COS)数据处理提供了 HLS 视频转码的功能。您可以结合 COS 数据工作流转码任务,播放 HLS 视频文件。

1、创建音视频转码任务;


2、选择系统模版中的任一 HLS 转码任务,配置任务生成 HLS 视频文件;


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


4、结合前面的步骤流程,利用TCPlayer播放公有读 HLS 视频文件地址,完整代码如下:

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

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 视频文件地址,完整代码如下:

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

2.4 效果:


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容