测试版

2025-03-05 15:16:45 +08:00
parent 8dbdce6d3f
commit 9accfddbe5
3849 changed files with 365801 additions and 0 deletions
--- a/node_modules/tcplayer.js/dist/examples/vod/tcplayer-vod-trial.html
+++ b/node_modules/tcplayer.js/dist/examples/vod/tcplayer-vod-trial.html
@@ -0,0 +1,150 @@
+<!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>Tcplayer Demo</title>
+  <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.9.0/tcplayer.min.css" rel="stylesheet">
+  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.9.0/tcplayer.v4.9.0.min.js"></script>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+    .tcplayer {
+      margin: 0 auto;
+    }
+
+    #player-container-id {
+      width: 640px;
+      height: 360px;
+    }
+
+    .tip-node {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      bottom: 5em;
+      left: 1em;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 4px;
+      padding: 5px 10px;
+
+    }
+
+    .tip-icon-close {
+      width: 14px;
+      height: 14px;
+      display: inline-block;
+      margin-left: 10px;
+      background-image: url(https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/picture/icon-close.png);
+      background-size: cover;
+      cursor: pointer;
+    }
+    
+    .page-node {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: #000;
+      z-index: 999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .page-content {
+      text-align: center;
+    }
+
+    .page-content a{
+      display: flex;
+      width: 120px;
+      height: 28px;
+      border-radius: 14px;
+      color: #663d00;
+      background-image: linear-gradient(90deg,#ffdf89 0,#f2ca5b 100%);
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+      margin: 0 auto;
+    }
+
+    .page-content #replay-btn::before {
+      content: '';
+      width: 12px;
+      height: 12px;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 5px;
+      background: url(https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/picture/icon-replay.png);
+      background-size: contain;
+    }
+
+    .page-content #replay-btn {
+      margin: 10px auto 0;
+    }
+
+    @media screen and (max-width: 480px) {
+      #player-container-id {
+        width: 100%;
+        height: 240px;
+      }
+    }
+
+
+  </style>
+</head>
+<body>
+
+<video id="player-container-id" preload="auto" playsinline webkit-playsinline>
+</video>
+
+<script>
+  var player = TCPlayer("player-container-id", { 
+    fileID: "3701925924406245944",
+    appID: "1500006438",
+    psign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNjQzOCwiZmlsZUlkIjoiMzcwMTkyNTkyNDQwNjI0NTk0NCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MzE3ODEyMzYsImV4cGlyZVRpbWVTdGFtcCI6MTkxNTg2NDQxNCwicGNmZyI6ImJhc2ljRHJtUHJlc2V0IiwidXJsQWNjZXNzSW5mbyI6eyJleHBlciI6MzAsInQiOiIxOTE1ODY0NDE0In19.F9gD5SidAoQPH4rDz4dr9-Z6DpoojOkHX_23kZPJ72A",
+    autoplay: false,
+  });
+
+  player.one("playing", function() {
+    var tipNode = document.createElement("div");
+    tipNode.innerHTML = "可试看30秒，开通 VIP 观看完整视频";
+    tipNode.className = "tip-node";
+
+    var tipIconClose = document.createElement("i");
+    tipIconClose.className = "tip-icon-close";
+    tipIconClose.onclick = function() {
+      tipNode.remove();
+    }
+  
+    tipNode.appendChild(tipIconClose);
+    player.el_.appendChild(tipNode);
+  });
+
+
+  player.on("ended", function() {
+    var pageNode = document.createElement("div");
+      pageNode.className = "page-node";
+
+      pageNode.innerHTML = `<div class="page-content">
+          <p>试看结束，VIP会员可观看完整视频</p>
+          <a href="https://cloud.tencent.com/document/product/881/30818" target="_blank">开通VIP会员</a>
+          <button id="replay-btn">重新试看</button>
+        </div>
+      `;
+      
+      player.el_.appendChild(pageNode);
+
+      document.querySelector('#replay-btn').onclick = function() {
+        player.play();
+        pageNode.remove();
+      };
+  });
+
+</script>
+</body>
+</html>