腾讯云Web播放器

TCPlayer腾讯web播放器的使用：

初始化：

步骤1：在页面中引入文件

在合适的地方引入播放器样式文件与脚本文件：

 <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 和 Dash 格式的视频，需要在 tcplayer.min.js 之前引入 hls.js 和 dash.js。-->
 <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js"></script>
 <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/dash.all.min.2.9.3.js"></script>
 <!--播放器脚本文件-->
 <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>

说明：

暂不支持 VUE React 等框架的模块加载方式，可以通过 script 全局引入相关脚本的方式进行使用。

步骤2：放置播放器容器

在需要展示播放器的页面位置加入播放器容器。例如，在 index.html 中加入如下代码（容器 ID 以及宽高都可以自定义）。

<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>

说明：

• 播放器容器必须为 <video> 标签。
• 示例中的 player-container-id 为播放器容器的 ID，可自行设置。
• 播放器容器区域的尺寸，建议通过 CSS 进行设置，通过 CSS 设置比属性设置更灵活，可以实现例如铺满全屏、容器自适应等效果。
• 示例中的 preload 属性规定是否在页面加载后载入视频，通常为了更快的播放视频，会设置为 auto，其他可选值：meta（当页面加载后只载入元数据），none（当页面加载后不载入视频），移动端由于系统限制不会自动加载视频。
• playsinline 和 webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用。
• 设置 x5-playsinline 属性在 TBS 内核会使用 X5 UI 的播放器。

步骤3：初始化代码

在页面初始化的代码中加入以下初始化脚本，传入在准备工作中获取到的 fileID 与 appID。

var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID，必须与 html 中一致
    fileID: '4564972818956091133', // 请传入需要播放的视频 filID（必须）
    appID: '1253668508' // 请传入点播账号的 appID（必须）
  });

注意：

要播放的视频需经过腾讯云转码，原始视频无法保证在浏览器中正常播放。

 播放效果：https://imgcache.qq.com/open/qcloud/video/tcplayer/examples/vod/tcplayer-vod-base.html