概述
Web 播放器是通过 HTML5 的 <video> 标签以及 Flash 实现视频播放。在浏览器不支持视频播放的情况下，实现了视频播放效果的多平台统一体验，并结合腾讯云点播视频服务，提供防盗链和播放 HLS 普通加密视频等功能。
集成指引
通过以下步骤，您就可以在网页上添加一个视频播放器。
步骤1：在页面中引入文件
播放器 SDK 支持 cdn 和 npm 两种集成方式：
1. 通过 cdn 集成
在本地的项目工程内新建 index.html 文件，html 页面内引入播放器样式文件与脚本文件：
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css" rel="stylesheet"/>
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
建议在使用播放器 SDK 的时候自行部署资源，单击下载播放器资源。部署解压后的文件夹，不能调整文件夹里面的目录，避免资源互相引用异常。 如果您部署的地址为 aaa.xxx.ccc，在合适的地方引入播放器样式文件与脚本文件，自行部署情况下，需要手动引用资源包文件夹 libs 下面的依赖文件，否则会默认请求腾讯云 cdn 文件。
<link href="aaa.xxx.ccc/tcplayer.min.css" rel="stylesheet"/>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.m.js。-->
<script src="aaa.xxx.ccc/libs/hls.min.x.xx.m.js"></script>
<!--播放器脚本文件-->
<script src="aaa.xxx.ccc/tcplayer.vx.x.x.min.js"></script>
2. 通过 npm 集成
首先安装 tcplayer 的 npm 包：
npm install tcplayer.js
导入 SDK 和样式文件：
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';
步骤2：放置播放器容器
在需要展示播放器的页面位置加入播放器容器。例如，在 index.html 中加入如下代码（容器 ID 以及宽高都可以自定义）。
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
步骤3：播放器初始化
页面初始化后，即可播放视频资源。播放器同时支持点播和直播两种播放场景，具体播放方式如下：
点播播放：播放器可以通过 FileID 播放腾讯云点播媒体资源，云点播具体流程请参见 使用播放器播放 文档。
直播播放：播放器通过传入 URL 地址，即可拉取直播音视频流进行直播播放。腾讯云直播 URL 生成方式可参见 自主拼装直播 URL。
通过 URL 播放（直播、点播）
通过 FileID 播放（点播）
在页面初始化之后，调用播放器实例上的方法，将 URL 地址传入方法。
var player = TCPlayer('player-container-id', {
sources: [{
src: 'path/to/video',
}],
licenseUrl: 'https://license-url',
}); // player-container-id 为播放器容器 ID，必须与 html 中一致
// player.src(url); // url 播放地址
H5兼容三端(ios，Android，PC)
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
this.player?.dispose()
this.player = TCPlayer(id, {
// sources: [{ src: 'https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8' }],
licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1256184516_1/v_cube.license',
});
if (isMobile) {
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
// Use native player for iOS
this.player.src(data.url)
} else if (/Android/i.test(navigator.userAgent)) {
// Use TCPlayer for Android this.player.src('https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8')
}
} else {
// For non-mobile devices, use TCPlayer
this.player.src('https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8')
}
H5集成tcplayer遇到的坑
腾讯云播放器没有提供Controls的显示/隐藏监听，需要自己添加监听事件
// 监听控制栏状态
findClassChange() {
this.domClassObserver = new MutationObserver((mutations: any) => {
if (mutations.length > 0) {
const mutation = mutations.slice(-1)[0]
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
if (mutation.target.classList.contains('vjs-user-inactive')) {
this.showControls = false
} else {
this.showControls = true
}
}
}
})
const videoDom = document.querySelector('.video-js')
this.domClassObserver.observe(videoDom, { attributes: true, attributeOldValue: true, attributeFilter: ['class'] })
}
}
