1、建立一个视频数据列表，将数据渲染到页面
2、通过超链接 跳转到视频播放页面带视频参数
3、web端接入 视频播放页面
步骤1：在页面中引入文件
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css" rel="stylesheet"/>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
<!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/libs/dash.all.min.4.4.1.js"></script>
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js"></script>步骤2：放置播放器容器
<video id="player-container-id" class="tcplayer-theme-custom-ui" preload="auto" playsinline webkit-playsinline x5-playsinline controlslist="noplaybackrate nodownload"></video>步骤3：播放器初始化
1.通过 URL 播放（直播、点播）
在页面初始化之后，调用播放器实例上的方法，将 URL 地址传入方法。
var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
player.src(url); // url 播放地址
2.通过 FileID 播放（点播）
在 index.html 页面初始化的代码中加入以下初始化脚本，传入在准备工作中获取到的 fileID（媒资管理）中的视频 ID 与 appID（在账号信息>基本信息中查看）。
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID，必须与 html 中一致
fileID: '3701925921299637010', // 请传入需要播放的视频 fileID（必须）
appID: '1500005696' // 请传入点播账号的 appID（必须）
// 私有加密播放需填写 psign， psign 即播放器签名，
// 签名介绍和生成方式参见链接：https://cloud.tencent.com/document/product/266/42436
//psign:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6InByaXZhdGUiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjI2MjY4NTkxNzksInN0cmljdE1vZGUiOjJ9fQ.Bo5K5ThInc4n8AlzIZQ-CP9a49M2mEr9-zQLH9ocQgI',
});注意：要播放的视频建议使用腾讯云转码，原始视频无法保证在浏览器中正常播放。
https://cloud.tencent.com/document/product/266/45554// 计算公式
// 计算 signatrue：
$signatrue = HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(palyload), KEY)
// 计算 Token：
$Token = base64UrlEncode(header) + '.' + base64UrlEncode(palyload) + '.' + base64UrlEncode(signatrue)
// 最终得到的 Token，即为点播播放器签名。
// 上面php版本为7.2以上版本
// 下面是7.0版本可以用
$content = rtrim(strtr(base64_encode(json_encode($header)), '+/', '-_'), '=').".".rtrim(strtr(base64_encode(json_encode($palyload)), '+/', '-_'), '=');
// 计算 signatrue：
$signatrue = hash_hmac("SHA256",$content,$antitheftKey,true);
// 计算 Token：
$psign = $content.".".str_replace('=', '', strtr(base64_encode($signatrue), '+/', '-_'));下附完整版代码
// 视频播放签名
public function getTokenpsign($fileID)
{
if (!empty($fileID)) {
// Header 为 JSON 格式，表示 JWT 使用的算法信息，固定使用如下内容：
$header = [
"alg" => "HS256",
"typ" => "JWT",
];
$vodSubAppId = "您的appid"; // 用户 appId(必填)*
$antitheftKey = "您的key"; // Key 是计算签名时使用的密钥，和 防盗链参数 中的KEY参数一致。
$currentTime = time(); // 当前 Unix 时间戳(必填)*
$psignExpire = $currentTime + 3600; // 可任意设置过期时间，示例1h
$urlTimeExpire = dechex($psignExpire); // 可任意设置过期时间，16进制字符串形式，示例1h
// palyload 为 JSON 格式，是播放器签名参数的内容
$palyload = [
"appId" => intval($vodSubAppId), // 用户 appId(必填)*
"fileId" => $fileID, // 视频 fileId(必填)*
"currentTimeStamp" => $currentTime, // 当前 Unix 时间戳(必填)*
"expireTimeStamp" => $psignExpire, // 签名过期 Unix 时间戳
"pcfg" => 'default', // 播放器配置(选填)
"urlAccessInfo" => [ // 播放链接防盗链配置(选填)
"t" => $urlTimeExpire, // 链接过期时间(16进制字符串)
// "exper" => 0, // 试看时长
"rlimit" => 1, // 最多允许多少个不同IP播放
// "us" => "", // 链接标识
// "uid" => "" // 用户id
],
"drmLicenseInfo" => [ // 加密内容的密钥配置参数
"expireTimeStamp" => 3600, // 密钥过期时间
// "strictMode" => 1, // 校验级别 取值范围【1，2】
]
];
// 计算公式
// 计算 signatrue：
// signatrue = HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(palyload), KEY)
// 计算 Token：
// Token = base64UrlEncode(header) + '.' + base64UrlEncode(palyload) + '.' + base64UrlEncode(signatrue)
// 最终得到的 Token，即为点播播放器签名。
// 上面php版本为7.2以上版本
// $content = rtrim(strtr(base64_encode(json_encode($header)), '+/', '-_'), '=').".".rtrim(strtr(base64_encode(json_encode($palyload)), '+/', '-_'), '=');
// $signatrue = hash_hmac("SHA256",$content,$antitheftKey,true);
// $psign = $content.".".str_replace('=', '', strtr(base64_encode($signatrue), '+/', '-_'));
return $psign;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>腾讯云视频点播示例</title>
<link href="/public/player/tcplayer/release/v4.5.4/tcplayer.min.css" rel="stylesheet"/>
<style type="text/css" media="screen">
/*// 修改播放器按钮的样式*/
.tcplayer {
margin: 0 auto;
}
.tcplayer-theme-custom-ui .vjs-play-progress{
background-color: #ff6429;
}
.tcplayer-theme-custom-ui .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
color: #ff6429;
}
.tcplayer-theme-custom-ui .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
color: #ff6429;
}
.tcplayer-theme-custom-ui .vjs-play-control .vjs-icon-placeholder:before {
color: #ff6429;
}
.tcplayer-theme-custom-ui .vjs-volume-panel .vjs-volume-level {
background-color: #ff6429;
}
.tcplayer-theme-custom-ui .vjs-mute-control .vjs-icon-placeholder:before {
color: #ff6429;
}
/*// 修改播放器按钮的样式*/
#player-container-id {
width: 100%;
max-width: 100%;
height: 0;
padding-top: 56.25%;
}
#wrap {
width: 50%;
margin: 0 auto;
}
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
.tcp-logo-img {
width: 50%;
}
}
</style>
</head>
<body>
<!--
注意事项：
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID，可自行设置
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
* playsinline webkit-playsinline x5-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
-->
<!-- 设置播放器容器 -->
<div id="wrap">
<video id="player-container-id" class="tcplayer-theme-custom-ui" preload="auto" playsinline webkit-playsinline x5-playsinline controlslist="noplaybackrate nodownload"></video>
</div>
</body>
</html>
<script type="text/javascript" src="/public/js/jquery.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
<!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
<script src="/public/player/tcplayer/release/v4.5.4/libs/TXLivePlayer-1.2.3.min.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
<script src="/public/player/tcplayer/release/v4.5.4/libs/hls.min.1.1.5.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
<script src="/public/player/tcplayer/release/v4.5.4/libs/flv.min.1.6.3.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。-->
<script src="/public/player/tcplayer/release/v4.5.4/libs/dash.all.min.4.4.1.js"></script>
<!--播放器脚本文件-->
<script src="/public/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js"></script>
<script>
var appID = <{$vodSubAppId}>; /*请传入点播账号的 appID（必须）*/
var fileID = "<{$fileID}>"; /*请传入需要播放的视频 fileID（必须）*/
var psign = "<{$psign}>"; /*/私有加密播放需填写 psign， psign 即播放器签名*/
var dataa = {}; //时间变化存入json串
var bomTimer; //定义定时器
var video = document.getElementById("player-container-id")
var start_time = 0; //开始观看视频时长
var last_watch = 300; // 最后观看视频时长
var current_time = 0; // 当前播放时间
var duration = 0; // 当前视频总时长
/*禁止快进*/
video.ontimeupdate = function () {
duration = video.duration
current_time = video.currentTime
if (current_time > duration) {
current_time = duration
}
if(current_time - start_time > 2) {
if(current_time - last_watch > 2) {
video.currentTime = last_watch
} else {
start_time = current_time
}
} else {
start_time = current_time
}
if (start_time > last_watch) {
last_watch = start_time
}
};
// 定义播放器容器内容
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID，必须与 html 中一致
appID: appID, // 请传入点播账号的 appID（必须）
fileID: fileID, // 请传入需要播放的视频 fileID（必须）
psign: psign, // 私有加密播放需填写 psign， psign 即播放器签名
// sources: [ // 播放器播放地址，格式：[{ src: '//path/to/video.mp4', type: 'video/mp4' }]
// {
// src: '//path/to/video.mp4',
// type: 'video/mp4'
// }
// ],
// width: , // 播放器区域宽度，单位像素，按需设置，可通过 CSS 控制播放器尺寸。
// height: , // 播放器区域高度，单位像素，按需设置，可通过 CSS 控制播放器尺寸。
controls: true, // 是否显示播放器的控制栏。
// poster: "", // 设置封面图片完整地址（如果上传的视频已生成封面图，优先使用生成的封面图，详细请参见 云点播 - 管理视频）。
autoplay: false, // 是否自动播放。
playbackRates: [0.5, 1, 1.25, 1.5, 2], // 设置变速播放倍率选项，仅 HTML5 播放模式有效。
loop: false, // 是否循环播放。
muted: false, // 是否静音播放。
preload: "meta", // 是否需要预加载，有3个属性"auto"，"meta"和"none" ，移动端由于系统限制，设置 auto 无效。
// swf: , // Flash 播放器 swf 文件的 URL。
posterImage: true, // 是否显示封面
bigPlayButton: true, // 是否显示居中的播放按钮（浏览器劫持嵌入的播放按钮无法去除）。
language: "zh-CN", // 设置语言，可选值为 "zh-CN"/"en"
languages:{ // 设置多语言词典。
"zh-cn":{
"Without anti-leech information.": "可定义错误提示文案，如：没带防盗链检测参数，请重试"
},
},
controlBar :{
playToggle: true, // 是否显示播放、暂停切换按钮。
progressControl: true, // 是否显示播放进度条。
volumePanel: true, // 是否显示音量控制。
currentTimeDisplay: true, // 是否显示视频当前时间。
durationDisplay: true, // 是否显示视频时长。
timeDivider: true, // 是否显示时间分割符。
fullscreenToggle: true, // 是否显示全屏按钮。
playbackRateMenuButton: false, // 是否显示播放速率选择按钮。
QualitySwitcherMenuButton: false, // 是否显示清晰度切换菜单。
},
reportable: false, // 设置是否开启数据上报。
plugins:{ // 设置插件功能属性的参数组合，后面有详细介绍。
// VttThumbnail: { // 控制缩略图显示，支持的属性如下：
// vttUrl: , // vtt文件绝对地址，必传
// basePath: , // 图片路径，非必须，不传时使用 vttUrl 的 path
// imgUrl: , // 图片绝对地址，非必须
// },
ContinuePlay: { // 断点续播 控制续播功能，支持的属性如下：
auto: false, // 是否在播放时自动续播
text: "上次播放至", // 提示文案
btnText: "继续播放", // 按钮文案
},
ProgressMarker: true, // 控制进度条显示
DynamicWatermark: { // 动态水印控制动态水印显示，支持的属性如下：
speed: 0.2, // 水印移动速度，取值范围 0-1, 非必须
content: "水印" // 文字水印内容，必传
},
ContextMenu: { // 可选值如下：
mirror: false, // 控制是否支持镜像显示
statistic: true, // 控制是否支持显示数据面板
levelSwitch: { // 控制切换清晰度时的文案提示
open: false, // 是否开启提示
switchingText: "Start switching", // 开始切换清晰度时的提示文案
switchedText: "Switch success", // 切换成功时的提示文案
switchErrorText: "Switch fail", // 切换失败时的提示文案
}
},
// PlayList: { // 展示列表
// data: playList,
// title: '播放列表',
// loop: false,
// }
},
// hlsConfig: , // hls.js 的启动配置，详细内容请参见官方文档 hls.js。
// webrtcConfig: { // webrtc 的启动配置，后面有详细介绍。
// connectRetryCount: 3, // SDK 与服务器重连次数
// connectRetryDelay: 1, // SDK 与服务器重连延时
// receiveVideo: true, // 是否拉取视频流
// receiveAudio: true, // 是否拉取音频流
// showLog: false, // 是否在控制台打印日志
// },
});
// 播放开始事件
player.on("playing", function (event) {
// console.info("playing", event);
// 进行一次清除定时器操作
clearInterval(bomTimer);
// 设置定时器
bomTimer = setInterval(function(){
// 当前播放位置有变更事件
player.on("timeupdate", function (event) {
dataa.progress = event
dataa.current_time = current_time_time
dataa.current_times = (Math.floor(current_time));
dataa.current_timess = (Math.floor((current_time-(current_time%60))/60)) +':'+ (Math.floor((current_time%60)))
dataa.current_timessss = (Math.floor((current_time-(current_time%60))/60))
dataa.current_timesssss = (Math.floor((current_time%60)))
});
console.log(dataa);
// 判断时间 大于观看时间 调用ajax 小于不调用
}, 5000);
});
// 暂停事件
player.on("pause", function (event) {
// 清除定时器
window.clearInterval(bomTimer);
});
// 视频播放已结束时触发
player.on("ended", function (event) {
// 清除定时器
window.clearInterval(bomTimer);
});
// 事件
var events = [
"play", // 已经开始播放，调用 play() 方法或者设置了 autoplay 为 true 且生效时触发，这时 paused 属性为 false。
// "playing", // 因缓冲而暂停或停止后恢复播放时触发，paused 属性为 false 。通常用这个事件来标记视频真正播放，play 事件只是开始播放，画面并没有开始渲染。
// "loadstart", // 开始加载数据时触发。
// "durationchange", // 视频的时长数据发生变化时触发。
// "loadedmetadata", // 已加载视频的 metadata。
// "loadeddata", // 当前帧的数据已加载，但没有足够的数据来播放视频的下一帧时，触发该事件。
// "progress", // 在获取到媒体数据时触发。
// "canplay", // 当播放器能够开始播放视频时触发。
// "canplaythrough", // 当播放器预计能够在不停下来进行缓冲的情况下持续播放指定的视频时触发。
// "error", // 视频播放出现错误时触发。
"pause", // 暂停时触发。
// "ratechange", // 播放速率变更时触发。
// "seeked", // 搜寻指定播放位置结束时触发。
// "seeking", // 搜寻指定播放位置开始时触发。
"timeupdate", // 当前播放位置有变更，可以理解为 currentTime 有变更。
// "volumechange", // 设置音量或者 muted 属性值变更时触发。
// "waiting", // 播放停止，下一帧内容不可用时触发。
"ended", // 视频播放已结束时触发。此时 currentTime 值等于媒体资源最大值。
// "resolutionswitching", // 清晰度切换进行中。
// "resolutionswitched", // 清晰度切换完毕。
// "fullscreenchange", // 全屏状态切换时触发。
// "webrtcevent", // 播放 webrtc 时的事件集合。
// "webrtcstats", // 播放 webrtc 时的统计数据。
// "suspend", //
// "abort", //
// "emptied", //
// "stalled", //
// "resize", //
];
// 事件
// 事件回调
// player.on("waiting", function (event) {
// window.clearInterval(bomTimer);
// });
// player.on("ended", function (event) {
// window.clearInterval(bomTimer);
// });
// player.on("error", function (event) {
// window.clearInterval(bomTimer);
// });
// events.forEach(function(val, i){
// player.on(val, function (event) {
// });
// });
// 事件回调
/*修改开始按钮的样式*/
const Button = TCPlayer.getComponent('Button');
const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
BigPlayButton.prototype.createEl = function () {
var el = Button.prototype.createEl.call(this);
let _html = '<button><svg t="1644397862160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3095" width="64" height="64"><path d="M298.666667 247.04V682.666667a42.666667 42.666667 0 0 1-85.333334 0V170.666667a42.666667 42.666667 0 0 1 65.024-36.352l554.666667 341.333333a42.666667 42.666667 0 0 1 0 72.704l-554.666667 341.333333a42.666667 42.666667 0 0 1-44.714666-72.704L729.258667 512 298.666667 247.04z" p-id="3096" fill="#ffffff"></path></svg></button>';
el.appendChild(TCPlayer.dom.createEl('div', {
className: 'vjs-button-icon',
innerHTML: _html,
}));
return el;
};
var controlBar = TCPlayer.getComponent('controlBar');
controlBar.prototype.options_ = {
children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'fullscreenToggle']
}
/*修改开始按钮的样式*/
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
