失眠网 > 腾讯云直播-Web 直播播放器 1.0

腾讯云直播-Web 直播播放器 1.0

时间：2022-06-19 11:31:37

相关推荐

腾讯云直播-Web 直播播放器 1.0

功能介绍

腾讯云视频直播播放器 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);