zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20240517

Browse Source
This commit is contained in:
始于初见
2024-05-17 18:02:49 +08:00
parent 8407d51fb6
commit b5264dc222
4056 changed files with 308094 additions and 41932 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
node_modules/tcplayer.js/dist/examples/vod/tcplayer-vod-hls-decrypt-key-tool.html generated vendored Normal file
View File

@@ -0,0 +1,215 @@
<!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>
<!-- 引入播放器 css 文件 -->
<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
<!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
<!--[if lt IE 9]>
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
<![endif]-->
<!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<!-- 引入播放器 js 文件 -->
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
<!-- 示例 CSS 样式可自行删除 -->
<style>
html,body{
margin: 0;
padding: 0;
}
@media screen and (max-width: 640px) {
#player-container-id {
width: 100%;
height: 270px;
}
}
/* 设置logo在高分屏的显示样式 */
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
.tcp-logo-img {
width: 50%;
}
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 30px;
}
.input-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.input-label {
width: 20%;
}
.input {
width: 80%;
}
.input-property {
display: flex;
width: 300px;
padding-bottom: 20px;
justify-content: space-between;
}
.tcplayer-hls {
background: #1c1c1c;
}
.input-tips {
color: white;
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.video-wrapper {
position: relative;
width: 640px;
height: 360px;
}
</style>
</head>
<body>
<!-- 设置播放器容器 -->
<div class="wrapper">
<div class="input-wrapper">
<div class="input-property">
<div class="input-label">appID:</div>
<input
class="input"
placeholder="请输入appID"
value=""
id="appID"
required
minlength="10"
maxlength="10"/>
</div>
<div class="input-property">
<div class="input-label">fileID:</div>
<input
class="input"
placeholder="请输入fileID"
value=""
id="fileID"
required
minlength="19"
maxlength="19"/>
</div>
<div class="input-property">
<div class="input-label">psign:</div>
<input
class="input"
placeholder="请输入psign"
value=""
id="psign"/>
</div>
<div class="input-property">
<div style="font-weight: 600;font-size: 16px">
注：
<a href="https://vods.cloud.tencent.com/signature/super-player-sign.html">点击生成psign</a>
</div>
</div>
<div class="input-property">
<div class="input-label">hlsDebug: </div>
<label for="debug">
<input type="radio" name="debug" value="open" checked=”true”>开启
<input type="radio" name="debug" value="close">关闭
</label>
</div>
<div class="input-property">
<div class="input-label">dkeydebug: </div>
<label for="dkey">
<input type="radio" name="dkey" value="close" checked=”true”>正常解密
<input type="radio" name="dkey" value="open">跳过解密
</label>
</div>
<button id="load-tcplayer">点击加载视频</button>
</div>
<div class="video-wrapper">
<div class="input-tips" id="tips">
请正确输入相关测试参数后加载视频
</div>
<video id="player-container-id" class="tcplayer-hls" preload="auto" width="640" height="360" playsinline webkit-playsinline>
</video>
</div>
</div>
<!--
注意事项：
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID，可自行设置
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
-->
<script>
if(TCPlayer.browser.IS_TBS && Hls.isSupported()){
TCPlayer.mountHlsProvider(true);
}
let loadBtn = document.querySelector('#load-tcplayer')
let appIDInput = document.querySelector('#appID')
let fileIDInput = document.querySelector('#fileID')
let psignInput = document.querySelector('#psign')
let tips = document.querySelector('#tips')
let debugInput = document.getElementsByName("debug")
let dkeyInput = document.getElementsByName("dkey")
loadBtn.addEventListener('click', function () {
let appID = appIDInput.value
let fileID = fileIDInput.value
let psign = psignInput.value
let debug = false
for (let i = 0; i < debugInput.length; i++) {
if (debugInput[i].checked && debugInput[i].value === 'open') {
debug = true
}
}
let dkey = false
for (let j = 0; j < dkeyInput.length; j++) {
if (dkeyInput[j].checked && dkeyInput[j].value === 'open') {
dkey = true
}
}
if (appID.length !== 10 || !/^([1-9][0-9]*)$/.test(appID)) {
alert("appID 输入有误")
appIDInput.value = ''
return
}
if (fileID.length !== 19 || !/^([1-9][0-9]*)$/.test(fileID)) {
alert("fileID 输入有误")
fileIDInput.value = ''
return
}
if (psign.length === 0) {
alert("psign 输入有误")
psignInput.value = ''
return
}
if (appID && fileID && psign) {
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
fileID: fileID,
appID: appID,
psign: psign,
dKeyDebug: dkey,
hlsConfig: {
debug: debug
}
//其他参数请在开发文档中查看
});
tips.style.display = 'none'
}
})
</script>
</body>
</html>