Web直播播放器1.0——腾讯sdk网页直播播放器

最新推荐文章于 2022-09-27 15:05:00 发布
最新推荐文章于 2022-09-27 15:05:00 发布
阅读量1.3k 收藏 1
点赞数
文章标签： javascript 移动开发 前端 ViewUI
原文链接：http://www.cnblogs.com/stnlcd/p/7262063.html
版权

https://www.qcloud.com/document/product/267/5704

 

功能介绍

腾讯云视频直播播放器Web SDK解决方案，可帮助腾讯云视频用户直接使用经过验证的视频播放能力，通过灵活的接口，快速同自有Web应用集成，以实现桌面应用播放功能。同时SDK提供在WEB端上传视频的能力。

该SDK所播放的文件受限于全局防盗链功能定义。详细内容请查看官网FAQ安全功能相关说明。

该文档面向考虑使用腾讯云视频直播播放器Web SDK进行开发并具备Javascript语言基础的开发人员。

格式支持

播放格式

WEB SDK直播视频格式支持：

播放格式PC浏览器移动端浏览器
HLS（m3u8）支持支持
RTMP支持不支持
FLV支持不支持

Android 系统兼容性问题
不像iPhone上只有一个Safari浏览器，Android上的系统标配浏览器有非常多的实现版本，所以Android手机浏览器的兼容是一个业界难题，故此表格中所示的手机浏览器格式支持情况比不适用于所有Android手机。

准备工作

Step 1：开通服务

注册腾讯云帐号，并开通直播服务

Step 2：创建频道

进入直播管理控制台并创建直播频道
直播视频管理

Step 3：获取ID

您可以在直播管理控制台查找到直播频道并对该频道进行管理。在控制界面您可以找到app_id。在基础设置中，可以查询到该频道的频道id。

Step 4：页面准备

在需要播放视频的页面（包括PC或H5）中引入初始化脚本

<script src="//qzonestyle.gtimg.cn/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="//qzonestyle.gtimg.cn/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需先完成第4部分API基础使用方法中的step1部分，添加播放器容器完成后再进行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.liveplay.myqcloud.com/2157_358535a.m3u8",
"live_url2" : "http://2000.liveplay.myqcloud.com/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 方法总览

1. 构造函数

qcVideo.Player(id, option, listener);

id: String ; 必选参数; 页面放置播放器的容器ID，可以自由定义。

option: Object ; 必选参数; 播放器的参数可设置选项，具体选项：

参数类型默认值参数说明
channel_idString无用直播视频ID播放方式为必选参数
app_idString无条件同上为必选参数，同一个账户下的视频，该参数是相同的
widthNumber无必选，例如：640，设置播放器宽度，单位为像素
heightNumber无必选，例如：480，设置播放器高度，单位为像素
cache_timeNumber0.3直播画面开始播放前，最大缓存时间 ; 这个属性可避免有效下行带宽不足导致免rtmp直播卡顿的情况(可选参数)
备注：该选项只对PC平台Flash播放器生效
h5_start_patchObject无h5播放，开始播放前贴片(可选参数)
{ 
url : 图片地址, 
stretch: false //是否拉伸图片铺面整个播放器，默认false
}
wordingObject无直播提示语自定义(可选参数，详细信息可见错误码)
{ 
'1' : '数据库错误',
'2' : '连接不到直播源，直播源没有推送视频内容(hls)',
'3' : '直播已经结束啦(hls)',
'113' : '连接超时，请稍后再试',
'114' : '连接超时，请稍后再试',
'1000' : 'channelID或者APPID错误',
'1001' : '无效参数，获取bizid失败',
'1009' : '直播源已失效',
'10000' : '请求超时，请检查网络设置',
'10008' : '密码错误，请重新输入', //无效密码
'10020' : '直播账户余额已不足，请及时充值', 
'11044' : '无效请求',
'11045' : '请求参数缺少channelID',
'11046' : '密码错误，请重新输入',
'20110' : '密码错误，请重新输入',
'20113' : '直播已经结束啦，请稍后再来' , //'downstream type is not exist' 拉流不存在
'20201' : '直播已经结束啦，请稍后再来', //get upstream info error' 查询推流错误
'20301' : '直播频道不存在，请确认频道ID',
'TipReconnect' : '重新连接中'
'TipRequireSafari' : '当前浏览器不能支持视频播放,请使用safari打开观看'
'TipRequireFlash' : '当前浏览器不能支持视频播放，可下载最新的QQ浏览器或者安装FLASH即可播放'
'TipVideoinfoResolveError' : '视频信息解析错误，请检查参数是否正确', //接口没有返回json数据，无法解析
'TipVideoinfoError' : '视频信息错误，请检查参数是否正确',
'TipConnectError' : '连接服务失败，请检查网络设置',
'TipConnectDeny' : '连接服务被拒绝', //flash请求触发安全异常
'TipLiveEnd' : '直播已经结束啦，请稍后再来', // NetStream.Play.Stop 事件, 
'TipStreamNotFound' : '直播已经结束啦，请稍后再来' //连接不到直播源，直播源没有推送视频内容
}
live_urlString无直播地址，支持hls/rtmp/flv三种格式
用视频地址播放方式为必选参数
live_url2String无直播地址，同上（可选参数）
volumeNumber0.5设置音量初始值0 到 1，默认0.5。（可选参数）
备注：该选项只对Flash播放器生效
httpsNumber0设置对播放页的https支持，0：关闭，1：开启
hide_volume_tipsNumber0是否隐藏音量提示，0：显示，1：隐藏 
备注：该选项只对Flash播放器生效
x5_typeString无通过 video 属性“x5-video-player-type”声明启用同层H5播放器，支持的值：h5 (该属性为TBS内核实验性属性，非TBS内核不支持，具体介绍参照 TBS文档 )
x5_fullscreenString无视频播放时将会进入到全屏模式，支持的值： true:开启 (该属性为TBS内核实验性属性，非TBS内核不支持，具体介绍参照 TBS文档 )
WModeStringwindowWindow 模式不支持其他页面元素覆盖在 Flash 播放器上面，如需要可以修改为 opaque 或其他 flash wmode 的参数值，可以在 Flash 播放器上进行覆盖其他元素。
备注：该选项只对PC平台Flash播放器生效

listener : Object ; 可选参数 ; 播放状态变化回调函数列表

函数名称类型说明
playStatusfunction播放状态变更时触发，回调函数的参数 status：String 
返回值：
ready: “播放器已准备就绪”, playing:”播放中” , playEnd:”播放结束” , error: “播放异常结束或者遇到错误” //由于移动端播放事件触发条件不一致，如果监听播放结束事件建议同时监听error，以免回调不能正确执行。 
type：String 在遇到error时返回错误类型 
例子：function(status, type){ ... }

2. 设置和动作

构造函数返回的播放器对象具有以下设置方法

方法说明
resize(width,height)参数：width :int；height :int 
功能：设置当前播放器宽度高度
返回：无
play()功能：开始播放
返回：Int(统一返回码)
备注：该功能仅PC端Flash播放器支持
stop()功能：停止播放
返回：Int(统一返回码)
备注：该功能仅PC端Flash播放器支持
pause()功能：暂停当前播放的视频 
返回：Int(统一返回码)
备注：该功能仅PC端Flash播放器支持
resume()功能：恢复播放视频
返回：Int(统一返回码)
备注：该功能仅PC端Flash播放器支持
addBarrage(barrage)参数：barrage://Array 弹幕信息 
[{ 
"type":"content", //消息类型 ,content:普通文本 (必选) 
"content":"hello world", //文本消息 (必选) 
"time":"1.101",//单位秒 ，表示距离当前调用添加字幕的时间多久后，开始显示该条字幕 (必选) 
"style": "C64B03;35",// 分号分割，第一项颜色值，第二项字体大小 (可选) 
"postion":"center" //固定位置 
center: 居中，bottom: 底部， up: 顶上 (可选) }, ... ] 
功能：添加弹幕 
返回：Int 返回码 
备注：弹幕仅在前端实现，后台功能请自行开发。该功能只在PC Flash播放器中生效
closeBarrage()功能：关闭弹幕，关闭后重新调用addBarrage可开启弹幕。 
返回：Int 返回码 
备注：弹幕仅在前端实现，后台功能请自行开发。该功能只在PC Flash播放器中生效

这些设置方法的统一返回码是：

错误码含义
200操作成功
0播放器未完全初始化
-2未知操作命令

问题排查

错误码列表

SDK使用过程中出现的异常code对照表

  • 前端返回错误
提示语说明
视频信息解析错误，请检查参数是否正确接口没有返回json数据，无法解析
视频信息错误，请检查参数是否正确视频信息解析错误
连接服务失败，请检查网络设置获取视频频道信息失败
连接服务被拒绝flash请求触发安全异常
缺少视频数据视频源数据缺失
直播已经结束啦，请稍后再来NetStream.Play.Stop 事件
直播已经结束啦，请稍后再来连接不到直播源，直播源没有推送视频内容
  • 后台返回错误
Code提示语说明
1数据库错误数据库连接超时或者查询错误
2连接不到直播源,直播源没有推送视频内容(hls)无法获取m3u8文件，连接不到直播源
3直播已经结束啦(hls)Manifest不是合法的m3u8文件，或直播源已结束
113连接超时，请稍后再试参数错误
1000channelID或者APPID错误app_id填写错误（长度错误）
1001无效参数，获取bizid失败app_id填写错误（长度正确，内容错误）
1009直播源已失效无效播放地址，直播源已失效
10000请求超时拉取播放器配置信息与视频信息超时，请检查网络重试，超时时间为10s
10001数据解析失败拉取播放器配置信息与视频信息获取到的数据解析失败，可能是网络问题或者服务器异常
10002连接超时，请稍后再试拉取播放器配置信息与视频信息失败，可能是网络问题或者服务器异常
10008密码错误，请重新输入无效密码
10020直播账户余额已不足，请及时充值余额不足
11044无效请求缺少APPID
11045请求参数缺少channelID缺少Channel ID
11046密码错误，请重新输入缺少密码
20110密码错误，请重新输入无效密码
20113直播已经结束啦，请稍后再来downstream type is not exist 拉流不存在
20201直播已经结束啦，请稍后再来get upstream info error 查询推流错误
20301直播频道不存在，请确认频道IDchannel_id错误（app_id填写正确）

备注：如遇到未在列表中的异常code，请联系我们的客服，客服会安排工程师进行解决。

常见问题

    • 为什么H5播放视频拉伸变形了？

      解答：H5并不具备拉伸视频的能力，请检查播放器的容器宽高是否设置正确

    • 为什么提示“直播已经结束啦，请稍后再来”

      解答：播放连接视频直播地址，未收到响应，并重试5次后仍未成功将出现这个提示。这时需要确认视频是否在进行推流，网络是否通畅。

    • QQ浏览器下无法在盖住视频

      解答：浏览器接管了H5的视频播放功能，X5内核视频播放使用了自研的播放器，考虑用户体验，浏览器使用了统一的播放界面。相关信息参考QQ浏览器文档说明

    • iOS系统下视频自动全屏播放

      解答：iOS系统由于webkit设置原因，默认视频全屏播放，如果您的视频需要在APP内实现内联播放，可以设置webkit-playsinline属性。目前iOS10以下版本的Safari无法禁止视频自动全屏。

    • 为什么在 PC Chrome 中Flash播放器会有两个播放按钮？

      解答：从Chrome 42版本开始将不再自动播放Flash, 只对主要的Flash内容进行自动播放，其它的Flash内容将被暂停播放，除非用户决定去手动点开它。

    • 为什么在 PC 浏览器中可以播放直播视频，移动端却不行

      解答：在移动端浏览器中播放直播视频，目前只支持hls协议，因此需要确认直播拉流地址是否有hls拉流url。

 

转载于:https://www.cnblogs.com/stnlcd/p/7262063.html

weixin_30545285
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浏览器直播
06-13
用cgi来发送flv数据流
javascript播放器
09-11
javascript播放器可以ktv了，大家共享
介绍一款JavaScript播放器 - Dewplayer
wuyushenglx的专栏
11-03 1152
网页播放器一般都是很简陋的，比如51cto的等等。Dewplayer是一款很不错的播放器，支持xml，方便后台管理，这里我写了一个后台接入的类，自己调用就可以对播放器进行增删改查的管理，导入导出。
js hls播放器
11-26
html5播放器，srs 使用nginx反向代理解决chrome播放HLS的跨域问题
按下透明度变化控件实现，svg集成，周结
weixin_34212189的博客
01-13 207
按钮按下透明度变化 因为工作的关系，常常面临需要设计点击某个控件具有按下透明度变化的需求。 例如： 制\点击透明度变化.gif) 可能图片有点模糊，但是大概就是在点击的时候，有明显按下的感觉，现在的处理方案有： 叫设计师多做一张图片，然后将两张图片做成同一个drawable来处理，例如这样 <selector xmlns:android="http://schemas.android.c...
gsyVideoPlayer直播短视频回放，集成腾讯播放器
01-03
gsyVideoPlayer是一个很棒的播放器，也可以当成是对ijkPlayer的封装库。 在初始化时，可以写如下代码。当然这是默认的，可以不写。 PlayerFactory.setPlayManager(IjkPlayerManager.class); 默认选择ijkplayer播放...
Android 腾讯云直播SDK
06-20
直播SDK
腾讯云 Web 超级播放器 JS 引用库
最新发布
05-28
腾讯云 Web 超级播放器 TCPlayer 可实现在手机浏览器和 PC 浏览器上播放音视频流的问题，功能强劲，兼容性好，可以不依赖用户安装 App，就能进行播放。 在实际的应用中，我们仍然根据需求直接改造了混淆代码，主要...
JAVA 对接腾讯云直播的实现
08-19
JAVA 对接腾讯云直播的实现 JAVA 对接腾讯云直播的实现是指使用 JAVA 语言对接腾讯云直播平台的实现过程。该实现过程主要涉及到对腾讯云直播平台的 API 调用，包括身份验证、签名生成、请求构建等步骤。 1. 腾讯云...
腾讯云直播SDK含demo
06-21
腾讯云视屏直播sdk含demo，详细内容可下载后运行看demo
大牛直播播放sdk
04-01
大牛直播sdk，万能播放器，能播放rtmp，hls等流，播放mp4
腾讯的h5直播文档
haozi_AA的博客
02-12 1570
文档首页 云通信 客户端集成 Web（直播聊天室） H5直播聊天室DEMO指引 H5直播聊天室DEMO指引 最近更新时间：2017-11-10 15:09:46 查看pdf 在这篇文章中： 1 官网sdk和demo 2 准备环境 2.1 安装apache 3 运行demo 3.1 准备直播大群id 3.2 运行demo（托管模式） 3.3 运行demo（独立模式） ...
直播平台源码搭建教程之通过SDK接口搞定千万级流量直播
云豹直播源码
09-22 1060
直播平台源码搭建教程之通过SDK接口搞定千万级流量直播 一、前置条件：获取必填参数 1. SDK的认证方式为AK/SK认证，可以在云控制台”我的凭证-访问密钥”页面上创建和查看AK/SK。更多信息请查看访问密钥(support.huaweicloud.com/usermanual-…)。 2. 准备接口的必填参数 PS：在云控制台-镜像服务IMS中可快速获取公共镜像相应的ID 服务器配置详情： 区域：华北-北京一 - cn-north-1 可用区：可用区1 - cn-north-1a 规格：
php视频播放链提取,php获取腾讯云点播上传视频后获取视频url地址以及时长 | 小灰灰博客...
weixin_29268637的博客
03-10 910
/*** Created by PhpStorm.* User: 小灰灰* Date: 2018/12/23 9:02* Other:*/class Test {public function getinfo(){//获取上传后的视频key防盗链的url地址以及时长$Key='*************'; //防盗KEY 在域名设置key加密里$appid="*****"; //...
腾讯云直播-Web 直播播放器 1.0
热门推荐
赵小叔
05-13 1万+
功能介绍腾讯云视频直播播放器 Web SDK 解决方案，通过灵活的接口，快速同自有 Web 应用集成，以实现桌面应用播放功能，同时 SDK 提供在 Web 端上传视频的能力。该 SDK 所播放的文件受限于全局防盗链功能定义，详细内容请查看官网 FAQ 安全功能相关说明，该文档面向考虑使用腾讯云视频直播播放器 Web SDK 进行开发并具备 Javascript 语言基础的开发人员。格式支持播放格式...
使用tvp.player_v2_zepto.js播放腾讯视频
飞空静渡
05-24 4158
tvp.player_v2_zepto.js还需要zepto.min.js。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"&gt;&
腾讯云点播web视频播放
qq_43012432的博客
09-27 1702
完整的web 接入 腾讯云点播 视频播放功能
腾讯课堂点播上云客户端实践总结
QcloudCommunity的博客
01-10 1548
导语 | 自从2018年企鹅辅导直播、点播和腾讯课堂直播上云以后，19年上半年腾讯课堂点播也开始自研上云。本文是对腾讯课堂点播上云客户端方案的整理与总结，希望能与各位同行一起交流。一、课...
视频直播方案（播放器和SDK）
qq_38833550的博客
06-17 590
首先是主播方，它是产生视频流的源头,通过一定的设备来采集数据。比如我们的是通过车载终端来获取视频流数据的。 其次是播放端，播放端功能有两个层面，第一个层面是关键性的需求；另一层面是业务层面的。先看第一个层面，它涉及到一些非常关键的指标，比如秒开，在很多场景当中都有这样的要求，然后是对于一些重要内容的版权保护。为了达到更好的效果，我们还需要配合服务端做智能解析，这在某些场景下也是关键性需求。再来看...
腾讯大讲堂可扩展Web架构探讨(共49张PPT).pptx
11-14
"腾讯大讲堂的这组PPT深入探讨了可扩展Web架构的关键要素，包括缓存、无共享架构、垂直与水平扩展、Web服务器的选择以及负载均衡技术。内容涵盖从基础概念到实际应用的多个层面，旨在帮助理解和构建能够应对大规模...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值