Web播放器

web视频播放器的使用及遇到的问题记录

https://cloud.tencent.com/document/product/881/20207

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

如果在域名限制区域，可以引入以下链接：

注意： 直接用本地网页无法调试，Web 播放器无法处理该情况下的跨域问题。

在需要展示播放器的页面位置加入播放器容器，即放一个 div 并命名，例如 id_test_video，视频画面都会在容器里渲染。对于容器的大小控制，您可以使用 div 的属性进行控制，示例代码如下：

编写 Javascript 代码，作用是去指定的 URL 地址拉取音视频流，并将视频画面呈现到添加的容器内。

如下是一个 直播格式的 URL 地址，使用 HLS（M3U8）协议，如果主播在直播中，则用 VLC 等播放器是可以直接打开该 URL 进行观看的：

如果要在手机浏览器上播放该 URL 的视频，则 Javascript 代码如下：

这段代码可以支持在 PC 及手机浏览器上播放 HLS（M3U8）协议的直播视频，虽然 HLS（M3U8）协议的视频兼容性不错，但部分 Android 手机依然不支持，其延迟较高，大约20秒以上的延迟。

PC 浏览器支持 Flash，其 Javascript 代码如下：

这段代码中增加了 FLV 的播放地址，Web 播放器如果发现当前的浏览器是 PC 浏览器，会主动选择 FLV 链路，从而实现更低的延迟。前提条件是 FLV 和 HLS（M3U8）这两个地址都是可以出流的，如果您使用腾讯云的视频直播服务，则无需考虑，因为腾讯云的直播频道默认支持 FLV、RTMP 和 HLS（M3U8）播放协议。

如果您发现视频无法播放，可能存在如下原因：

原因一：视频源有问题 如果是直播 URL，则需要检查主播是否已经停止推流，可以用浮窗提示观众：“主播已经离开”。请参见 直播推流。 如果是点播 URL，则需要检查要播放的文件是否还存在于服务器上（如播放地址是否已经从点播系统移除）。

原因二：本地网页调试 目前 TCPlayerLite 不支持本地网页调试（即通过file://协议打开视频播放的网页），因为浏览器有跨域安全限制，所以在 Windows 系统上放置一个 test.html 文件来进行测试是无法播放的，需要将其上传到服务器上进行测试。而前端工程师可以通过反向代理的方式，对线上页面进行本地代理以实现本地调试，这是主流的本地调试方法。

原因三：手机兼容问题 普通的手机浏览器只支持 HLS（M3U8) 协议的播放，不支持 FLV 和 RTMP 协议，最新版本的 QQ 浏览器支持 FLV 协议的播放。

原因四：跨域安全问题 PC 浏览器的视频播放基于 Flash 控件实现，但 Flash 控件会做跨域访问检查，如果播放视频所存放的服务器没有部署跨域策略，则会出现问题。 解决方法：在视频存储服务器根域名下添加跨域配置文件crossdomain.xml，并配置 Flash swf 所在域名，以允许 Flash 和 JavaScript 跨域播放视频。 播放器的 Flash swf 文件默认存放在imgcache.qq.com域名下，如需部署到自己的服务器上，可自行下载并部署：swf 文件地址。 如果是在域名限制区域，需要的播放器的 Flash swf 文件默认存放在cloudcache.tencent-cloud.com域名下，并且在播放器初始化的时候传递 flashUrl。

设置封面涉及到 poster 属性，下面将详细介绍 poster 属性的使用方法。

注意： 封面功能在部分移动端播放环境下可能失效，通常是由于移动端 webview 劫持视频播放造成的，需要 webview 支持 video 叠加元素或者放开劫持视频播放。相关详细说明请参见 常见问题。

poster 支持传入图片地址作为播放器的封面，在播放器区域内居中，并且以图片的实际分辨率进行显示。

poster 支持传入一个对象，在对象中可以对封面的展现样式（style）和图片地址（src）进行设置。

style 支持的样式如下：

使用 cover 方式显示封面。线上示例如下，在 PC 浏览器中右键单击【查看页面源码】即可查看页面的代码实现： 视频封面

注意：

同腾讯视频，Web 播放器支持多清晰度，如下图所示：

播放器本身是没有能力去改变视频清晰度的，视频源只有一种清晰度，称之为原画，而原画视频的编码格式和封装格式多种，Web 端无法支持播放所有的视频格式，如点播支持以 H.264 为视频编码，MP4 和 FLV 为封装格式的视频。

多清晰度的实现依赖于视频云：

注意： 上传后的原始视频是未经过腾讯云转码的，不能直接用于播放。

多清晰度支持的代码实现如下所示：

使用多种分辨率的设置及切换功能。线上示例如下，在 PC 浏览器中右键单击【查看页面源码】即可查看页面的代码实现：分辨率切换 正常情况将看到如下效果

注意：

Web 播放器支持提示语定制。

如下是让播放器支持自定义提示语的核心代码，主要在 wording 属性上设置提示语。

视频播放失败，同时使用自定义提示文案的功能。线上示例如下，在 PC 浏览器中右键单击【查看页面源码】即可查看页面的代码实现：

注意： 以上示例链接仅用于文档演示，请勿用于生产环境。

说明： Code 1 - 4 对应的是 H5 原生事件。 由于 Flash 的黑盒特性以及 H5 视频播放标准的不确定性，错误提示语会不定期更新。

如下是一个线上示例代码，在 PC 浏览器中右键单击【查看页面源码】即可查看页面的代码实现： 播放示例

注意： 以上示例链接仅用于文档演示，请勿用于生产环境。

播放器支持的所有参数，如下所示：

播放器实例支持的方法，如下所示：

注意： 以上方法必须是TcPlayer的实例化对象，且需要初始化完毕才可以调用（即 load 事件触发后）。

设置自动播放可以自动获取第一帧当封面，省去了设置封面图的步骤，此方法在 ios 端是正常的，因为 ios 默认是不允许自动播放的，所以既不自动播放又可以正常显示封面图；但是在安卓端个别机型会出现自动播放的问题，如果页面中一个视频的话还可以，当一个页面出现多个视频的时候就会出现多个视频同时播放的问题，可以通过以下方法解决此问题，但是视频多的情况下可能会出现页面非常卡顿的情况，最后还是建议手动给每个视频单独配置封面图（虽然麻烦，但是稳定。。。。）

https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1175.654f24c5nBkXxD