功能介绍
腾讯云视频直播播放器 Web SDK 解决方案,通过灵活的接口,快速同自有 Web 应用集成,以实现桌面应用播放功能,同时 SDK 提供在 Web 端上传视频的能力。
该 SDK 所播放的文件受限于全局防盗链功能定义,详细内容请查看官网 FAQ 安全功能相关说明,该文档面向考虑使用腾讯云视频直播播放器 Web SDK 进行开发并具备 Javascript 语言基础的开发人员。
格式支持
播放格式:支持 Web SDK 直播视频格式。
Android 系统兼容性问题:不像 iPhone 上只有一个 Safari 浏览器,Android 上的系统标配浏览器有非常多的实现版本,所以 Android 手机浏览器的兼容是一个业界难题,故此表格中所示的手机浏览器格式支持情况比不适用于所有 Android 手机。
准备工作
Step 1:开通服务
在腾讯云官网注册腾讯云帐号,并开通直播服务。
Step 2:创建频道
进入直播管理控制台并创建直播频道。
Step 3:获取 ID
您可以在直播管理控制台查找到直播频道并对该频道进行管理,在控制界面您可以找到 app_id,单击该直播频道可以在【基础设置】查询到该频道的频道 ID。
Step 4:页面准备
在需要播放视频的页面(包括 PC 或 H5)中引入初始化脚本。
<script src="///open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script>;
注意:
播放页面需要挂 IP 或域名访问,如若直接打开本地静态页面将无法播放;
另外可以通过服务端 API 获取频道 ID 和 APPID,具体请参考文档链接。
API 基础使用方法
Step 1:添加播放器容器
在需要展示播放器的页面位置加入播放器容器,例如:在 index.html 中加入如下代码:
<div id="id_video_container" style="width:100%; height:auto;"></div>
容器 ID 以及宽高都可以自定义。
Step 2:创建 Player 对象
接下来在页面底部引入的 Javascript 脚本中创建一个播放器对象,这时将使用播放器的构造函数:
var player = new qcVideo.Player("id_video_container", {"channel_id": "16093104850682282611","app_id": "1251783441","width" : 480,"height" : 320});
调用构造函数将会生成一个播放器对象,并且根据 channel_id 和 app_id 找到对应的直播视频流进行播放,如果没有 channel_id 和 app_id,您也可以使用直播地址的形式进行播放,具体示例如API 使用案例中的 case3,您可以使用播放器对象 player 对播放器进行控制,播放器对象的参数选项下方 API 方法总览有详细介绍。
完整实例代码
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/><title>直播</title></head><body><div id="id_video_container" style="width:100%; height:auto;"></div><script src="///open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script><script type="text/javascript">(function () {var player = new qcVideo.Player("id_video_container", {"channel_id": "16093104850682282611","app_id": "1251783441","width" : 480,"height" : 320});})()</script></body></html>
API 使用案例
使用 API 需先完成 API 基础使用方法中的添加播放器容器部分,添加完成后再进行 API 使用。
Case 1:在 PC 或移动端(H5)中播放直播视频
直播 SDK 在 PC 和 H5 中的使用方式是一样的,SDK 会检测平台,自动选择最优的播放方案,例如在 PC 平台,SDK 会优先使用 Flash 播放器以适应多种视频格式的情况(需要 Flash 版本高于 10,否则将提示升级 Flash),而在移动端 H5 则会使用 video 标签进行播放(如果浏览器不支持 H5,则提示使用 QQ 浏览器),SDK 同时支持传频道 ID 或视频文件地址的方式播放。
注意:
两种播放方式不能混合使用。
Case 2:使用频道 ID 播放视频
var option = {"channel_id": "16093425727656143421","app_id": "1251132611","width" : 480,"height" : 320//...可选填其他属性};var player = new qcVideo.Player("id_video_container", option);
注意:
使用频道 ID 播放视频不支持直播码的方式。
Case 3:使用直播视频地址播放视频
如果没有 app_id 及 channel_id,播放器也支持使用直播视频地址播放视频。
var option = {"live_url" : "http://2157./2157_358535a.m3u8","live_url2" : "http://2000./live/2000_2a1.flv","width" : 480,"height" : 320//...可选填其他属性};var player = new qcVideo.Player("id_video_container", option);
注意:
最多支持传入两个播放地址,live_url、live_url2 ,如果这两个地址都传了,那么会按平台支持最好的一个地址选择进行播放,例如当前环境是 PC,那么会优先选择其中为 rtmp 或 flv 的格式,当前环境为手机 H5,会优先选择 hls 格式进行播放。
Case 4:如何使用"弹幕"功能?
在播放器初始化完成后,调用播放器对象的 addBarrage(barrage) 方法,可以为视频添加弹幕,具体参数参考API 方法总览的说明,例如,给正在播放的视频添加两条弹幕:
var barrage = [{"type":"content", "content":"hello world", "time":"1"},{"type":"content", "content":"居中显示", "time":"1", "style":"C64B03;30","position":"center"}];player.addBarrage(barrage);
注意:
弹幕功能仅在前端实现,后台支持请自行开发,弹幕只在 PC Flash 播放器中生效,H5 暂时不具备弹幕功能。
API 方法总览
构造函数
qcVideo.Player(id, option, listener);
ID:String,必选参数,页面放置播放器的容器 ID,可以自由定义;
option:Object,必选参数,播放器的参数可设置选项,具体选项:
listener:Object,可选参数,播放状态变化回调函数列表。
设置和动作
构造函数返回的播放器对象具有以下设置方法
这些设置方法的统一返回码是:
如果觉得《腾讯云直播-Web 直播播放器 1.0》对你有帮助,请点赞、收藏,并留下你的观点哦!