产品动态
产品公告
<!--播放器样式文件--><link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css" rel="stylesheet"><!--播放器脚本文件--><script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js"></script>
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline></video>
<video> 标签。player-container-id 为播放器容器的 ID，可自行设置。preload 属性规定是否在页面加载后载入视频，通常为了更快的播放视频，会设置为 auto，其他可选值：meta（当页面加载后只载入元数据），none（当页面加载后不载入视频），移动端由于系统限制不会自动加载视频。playsinline 和 webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用。x5-playsinline 属性在 TBS 内核会使用 X5 UI 的播放器。https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<视频格式>。var player = TCPlayer("player-container-id", {}); // player-container-id 为播放器容器 ID，必须与 html 中一致player.src("https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"); // COS 视频对象地址
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
<script src="https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/lib/dash.all.min.js"></script>
var player = TCPlayer("player-container-id", {}); // player-container-id 为播放器容器 ID，必须与 html 中一致player.src("https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"); // COS 视频地址
var player = TCPlayer("player-container-id", {poster: "https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8?ci-process=pm3u8&expires=3600" // 私有 ts 资源 url 下载凭证的相对有效期为3600秒});
var player = TCPlayer("player-container-id", {poster: "https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.png"});
var player = TCPlayer("player-container-id", {}); // player-container-id 为播放器容器 ID，必须与 html 中一致player.src("https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"); // hls 加密视频地址
var player = TCPlayer("player-container-id", {}); // player-container-id 为播放器容器 ID，必须与 html 中一致player.src("https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"); // 多码率视频地址
var player = TCPlayer("player-container-id", {plugins:{DynamicWatermark: {speed: 0.2, // 速度content: "腾讯云数据万象 CI", // 文案opacity: 0.7 // 透明度}}});
var PosterImage = TCPlayer.getComponent('PosterImage');PosterImage.prototype.handleClick = function () {window.open('https://www.tencentcloud.com/products/ci'); // 设置广告链接};var player = TCPlayer('player-container-id', {poster: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx..png', // 广告封面图});player.src('https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4');var adTextNode = document.createElement('span');adTextNode.className = 'ad-text-node';adTextNode.innerHTML = '广告';var adCloseIconNode = document.createElement('i');adCloseIconNode.className = 'ad-close-icon-node';adCloseIconNode.onclick = function (e) {e.stopPropagation();player.posterImage.hide();};player.posterImage.el_.appendChild(adTextNode);player.posterImage.el_.appendChild(adCloseIconNode);
var player = TCPlayer('player-container-id', {plugins: {VttThumbnail: {vttUrl: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.vtt' // 进度图 VTT 文件},},});player.src('https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4');
var player = TCPlayer('player-container-id', {});player.src('https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4');player.on('ready', function () {// 添加字幕文件var subTrack = player.addRemoteTextTrack({src: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.srt', // 字幕文件kind: 'subtitles',srclang: 'zh-cn',label: '中文',default: 'true',}, true);});
var player = TCPlayer('player-container-id', {});player.src('https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4');player.on('ready', function () {// 设置中文字幕var subTrack = player.addRemoteTextTrack({src: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/zh.srt', // 字幕文件kind: 'subtitles',srclang: 'zh-cn',label: '中文',default: 'true',}, true);// 设置英文字幕var subTrack = player.addRemoteTextTrack({src: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/en.srt', // 字幕文件kind: 'subtitles',srclang: 'en',label: '英文',default: 'false',}, true);});
文档反馈