Web Player TcPlayer

Web Player TcPlayer

详细请参考：https://cloud.tencent.com/document/product/881/44876

• 概述

tcplayer lite主要用于在手机浏览器和PC浏览器中播放音频/视频流。使用该播放器，您可以在微信时刻和微博等社交平台上共享视频，而无需安装其他应用程序。本文档面向具有JavaScript基本知识的开发人员。

• 基础

入门前必须学习的基本知识:

LVB和VOD

实时生成LVB视频源。一旦VJ停止广播，LVB URL就变得无效，并且由于实时播放实时流，因此在播放期间播放器上不显示任何进度条。

VOD视频源是服务器上的一个文件，只要未被提供商删除，就可以随时播放。由于整个视频文件都存储在服务器上，因此在播放过程中会显示进度条。

支持的协议

使用web播放器播放视频取决于浏览器，而不是网页中的代码。因此，兼容性可能比我们预期的要低。事实上，并非所有的移动浏览器都能产生预期的性能结果。一些移动浏览器甚至根本不支持视频播放。用于在网页上播放视频的最常见视频源URL是以“m3u8”结尾的URL。我们称之为HLS（httplivestreaming），这是苹果公司的标准。目前，由于苹果的影响，这种格式与各种手机浏览器产品的兼容性最好。然而，这种格式有一个缺点：20-30秒的大延迟。即便如此，对于移动浏览器，我们也没有其他选择。

这种情况在PC上看起来更好，因为PC浏览器仍然使用支持各种视频源格式的FLASH小部件。另外，针对不同浏览器的FLASH小部件都是Adobe开发的，所以兼容性很好。

• 接口

1.  将初始化脚本引入要播放视频的页面（包括PC或H5）

<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>;

注：不能直接使用本地页执行调试，因为tcplayer无法处理这种情况下的跨域问题

2.  将容器放入HTML

<div id="id_test_video" style="width:100%; height:auto;"></div>

3.  准备视频播放

下一步是编写JavaScript代码，用于从指定的URL提取音频/视频流，并在步骤2中添加的容器中显示视频。

    3.1简单的回放

    典型的LVB URL如下所示，它基于HLS（m3u8）协议。只要VJ还在广播，VLC等播放器就可以直接打开这个URL来观看视频：

    http://2157.liveplay.myqcloud.com/2157_358535a.m3u8      //m3u8 playback URL

    3.2由于PC浏览器支持flash，JavaScript代码如下

var player =  new TcPlayer('id_test_video', {
"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
"flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //Add an FLV playback URL to play videos on PC. Replace the URL with a valid playback URL.
"autoplay" : true,      //Most mobile browsers including Safari on iOS do not support auto video playback.
"coverpic" : "http://www.test.com/myimage.jpg",
"width" :  '480',//Video display width. Use the video definition width if possible.
"height" : '320'//Video display height. Use the video definition height if possible.
});

    与手机端相比，我们添加了一个FLV回放URL。当TcPlayer检测到浏览器是PC浏览器时，它将选择FLV链接以实现较低的延迟。条件是FLV和HLS（m3u8）地址都可以流式传输视频。如果您使用腾讯云VOD服务，您不必考虑这个问题，因为腾讯云的每个VOD频道都支持三种协议：FLV、RTMP和HLS（m3u8）。

    3.3为什么视频不能播放？

    3.3.1 视频源无效

    3.3.2PC浏览器基于Flash小部件实现视频播放。以前做过Flash开发的人都知道Flash小部件执行跨域访问检查。如果要播放的视频所在的服务器上未部署跨域策略，则会遇到此问题。解决方法可以是：查找跨域配置文件跨域.xml在视频服务器的根域名下添加域名腾讯网致：

<cross-domain-policy>
<allow-access-from domain="*.qq.com" secure="false"/>
</cross-domain-policy>

4.  播放器配置封面图像

你可以将图片的URL作为玩家的封面图片传递给coverpic。图像将以实际分辨率显示在播放器区域的中心。

"coverpic" : "http://www.test.com/myimage.jpg"

配置封面图像显示样式：

default：以实际分辨率在中间显示图像；

stretch：拉伸图像以填充整个播放器区域。这可能会扭曲图像。

cover：水平拉伸图像，同时保持其比例以填满播放器区域。图像可能无法在区域中完全显示。

"coverpic" : {"style":"stretch", "src":"http://www.test.com/myimage.jpg"}

5.   多定义支持

5.1原理

您可以为上的视频选择不同的定义优酷网, 土豆网或者腾讯。我们如何实现这个特性？

首先，你应该知道播放器不能改变视频的清晰度。生成视频源时只有一个定义，称为“原始”。原始视频有不同的编码格式和封装格式，网页不支持所有的视频播放格式。在VOD场景中，视频的编码格式必须是H.264，封装格式必须是MP4或FLV。

那么，多定义选择是如何实现的呢？这就是视频云发挥作用的地方：

在LVB场景中，VJ的原始视频将在腾讯云中实时转码，然后将转码后的视频分发到不同的频道，例如“高清（HD）”和“标准清晰度（SD）”。每个频道的视频都有其相应的URL：

http://2157.liveplay.myqcloud.com/2157_358535a.m3u8          //Original
http://2157.liveplay.myqcloud.com/2157_358535a_900.m3u8      //HD
http://2157.liveplay.myqcloud.com/2157_358535a_550.m3u8      //SD

注：上传的原创视频未经腾讯云转码，不能直接播放。

6.  自定义错误消息

var player = new TcPlayer('id_test_video', {
"m3u8"   : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8",//Replace the URL with a valid playback URL.
"autoplay" : true,      //Safari browser on iOS do not support this feature.
"coverpic" : "http://www.test.com/myimage.jpg",
"wording": {
    2032: "Video request failed, check your network.",
    2048: "m3u8 file request failed, this may be caused by network error or cross-domain issue."
}
});

错误代码参考表 具体查看（https://intl.cloud.tencent.com/document/product/267/7479  6.3）

7.  参数列表 

大致举例：m3u8、m3u8_hd、m3u8_sd、flv、flv_hd、flv_sd、mp4、mp4_hd、mp4_sd、rtmp、rtmp_hd、rtmp_sd、h5_flv（是否启用flv.js公司播放flv视频）、x5_player（TBS模式播放）

具体参考上述连接

8.  实例方法列表

大致举例：play()、pause()、togglePlay()--切换视频播放状态、mute(muted)--切换静音状态、volume(val)、playing()、duration()--获取视频持续时间（点播）、currentTime(time)-配置视频播放时间点（点播）、fullscreen(enter)--（全屏API）、buffered()--获取视频缓冲区数据百分比（点播）、destroy()、switchClarity()--开关清晰度，通过值“od”、“hd”、“sd”

具体参考上述连接

9.  补充

TcPlayer结合H5<video>和Flash来播放视频。默认情况下，播放器会为不同的播放环境选择更合适的。

虽然浏览器提供商已经开始放弃对Flash widget的支持，但国内大部分浏览器仍然不支持MSE，用户在播放FLV-HLS（m3u8）视频时不能切换到H5<video>播放模式，RTMP视频必须使用Flash模式播放。因此，TcPlayer在默认情况下仍然首先启用Flash播放模式，并且只有在检测到Flash小部件不可用时才使用H5<video>来播放视频。

从版本2.2.0开始，TcPlayer允许用户为回放模式优先级配置属性。如果您喜欢H5<video>播放，您可以将“Flash”属性配置为“false”，这样播放器将默认启用H5<video>播放视频，如果H5<video>不可用，则使用Flash模式。如果未检测到Flash小部件，您将看到一条消息：“当前系统环境不支持此视频格式”。

Listen 事件

TcPlayer结合H5<video>和FLASH来播放视频。但是使用这两种方法播放视频时触发的事件是不同的。在本例中，我们基于H5<video>标准转换FLASH回放事件，以实现统一的回放事件名称。TcPlayer捕获并透明地传输由这两种回放方法触发的本机事件。

直播和点播

直播是指视频源是实时的，一旦主播停播了，这个地址也就失去意义了，而且由于是实时直播，没有进度条

点播只是视频源是一个服务器上的文件，文件只要没有被删除，就可以随时播放，有进度条