首页 发现 帮助
注册 登录
shaogen1995
/
changzhouWenXin
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

up-封面视频功能

shaogen1995 2 年之前
父节点
e3c78beff2
当前提交
c26d04a881
共有 6 个文件被更改，包括 107 次插入 和 127 次删除
合并视图 显示文件统计
  1. 0 123
      index - 副本.html
  2. 14 2
      index.html
  3. 28 1
      myCode/index.js
  4. 29 0
      myCode/style.css
  5. 36 1
      myCode/style.less
  6. 二进制
      myCode/video.mp4

+ 0 - 123
index - 副本.html
查看文件 

@@ -1,123 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en-us">
 
-
 
-<head>
 
-  <meta charset="utf-8">
 
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
-  <title>中医药大观园</title>
 
-  <link rel="shortcut icon" href="TemplateData/favicon.ico">
 
-  <link rel="stylesheet" href="TemplateData/style.css">
 
-  <link rel="manifest" href="manifest.webmanifest">
 
-
 
-  <!-- 引用自己的样式和js -->
 
-  <link rel="stylesheet" href="./myCode/style.css">
 
-  <script src="./myCode/index.js"></script>
 
-
 
-
 
-</head>
 
-
 
-
 
-<body>
 
-  <div id="unity-container">
 
-    <canvas id="unity-canvas" tabindex="-1"></canvas>
 
-    <div id="unity-loading-bar">
 
-      <div id="unity-logo"></div>
 
-      <div id="unity-progress-bar-empty">
 
-        <div id="unity-progress-bar-full"></div>
 
-      </div>
 
-    </div>
 
-    <div id="unity-warning"> </div>
 
-  </div>
 
-
 
-  <!-- 加载中文字 -->
 
-  <div id="lodingTxt">加载中...</div>
 
-
 
-  <script>
 
-    window.addEventListener("load", function () {
 
-      if ("serviceWorker" in navigator) {
 
-        navigator.serviceWorker.register("ServiceWorker.js");
 
-      }
 
-    });
 
-
 
-    var container = document.querySelector("#unity-container");
 
-    var canvas = document.querySelector("#unity-canvas");
 
-    var loadingBar = document.querySelector("#unity-loading-bar");
 
-    var progressBarFull = document.querySelector("#unity-progress-bar-full");
 
-    var warningBanner = document.querySelector("#unity-warning");
 
-
 
-    // Shows a temporary message banner/ribbon for a few seconds, or
 
-    // a permanent error message on top of the canvas if type=='error'.
 
-    // If type=='warning', a yellow highlight color is used.
 
-    // Modify or remove this function to customize the visually presented
 
-    // way that non-critical warnings and error messages are presented to the
 
-    // user.
 
-    function unityShowBanner(msg, type) {
 
-      function updateBannerVisibility() {
 
-        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
 
-      }
 
-      var div = document.createElement('div');
 
-      div.innerHTML = msg;
 
-      warningBanner.appendChild(div);
 
-      if (type == 'error') div.style = 'background: red; padding: 10px;';
 
-      else {
 
-        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
 
-        setTimeout(function () {
 
-          warningBanner.removeChild(div);
 
-          updateBannerVisibility();
 
-        }, 5000);
 
-      }
 
-      updateBannerVisibility();
 
-    }
 
-
 
-    var buildUrl = "Build";
 
-    var loaderUrl = buildUrl + "/ChangZhouHospital_1.10.loader.js";
 
-    var config = {
 
-      dataUrl: buildUrl + "/ChangZhouHospital_1.10.data.unityweb",
 
-      frameworkUrl: buildUrl + "/ChangZhouHospital_1.10.framework.js.unityweb",
 
-      codeUrl: buildUrl + "/ChangZhouHospital_1.10.wasm.unityweb",
 
-      streamingAssetsUrl: "StreamingAssets",
 
-      companyName: "DefaultCompany",
 
-      productName: "ChangZhouHospital",
 
-      productVersion: "0.1",
 
-      showBanner: unityShowBanner,
 
-    };
 
-
 
-    // By default Unity keeps WebGL canvas render target size matched with
 
-    // the DOM size of the canvas element (scaled by window.devicePixelRatio)
 
-    // Set this to false if you want to decouple this synchronization from
 
-    // happening inside the engine, and you would instead like to size up
 
-    // the canvas DOM size and WebGL render target sizes yourself.
 
-    // config.matchWebGLToCanvasSize = false;
 
-
 
-    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
 
-      // Mobile device style: fill the whole browser client area with the game canvas:
 
-      var meta = document.createElement('meta');
 
-      meta.name = 'viewport';
 
-      meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
 
-      document.getElementsByTagName('head')[0].appendChild(meta);
 
-    }
 
-
 
-    loadingBar.style.display = "block";
 
-
 
-    var script = document.createElement("script");
 
-    script.src = loaderUrl;
 
-    script.onload = () => {
 
-      createUnityInstance(canvas, config, (progress) => {
 
-        progressBarFull.style.width = 100 * progress + "%";
 
-      }).then((unityInstance) => {
 
-        loadingBar.style.display = "none";
 
-
 
-        // 把unity的实例保存起来
 
-        unityExamples = unityInstance
 
-        // 隐藏加载中文字
 
-        document.querySelector('#lodingTxt').style.display = 'none'
 
-
 
-      }).catch((message) => {
 
-        alert(message);
 
-      });
 
-    };
 
-    document.body.appendChild(script);
 
-  </script>
 
-</body>
 
-
 
-</html>

+ 14 - 2
index.html
查看文件 

@@ -9,9 +9,9 @@
 
   <link rel="stylesheet" href="TemplateData/style.css">
 
   <link rel="stylesheet" href="TemplateData/style.css">
 
   <link rel="manifest" href="manifest.webmanifest">
 
   <link rel="manifest" href="manifest.webmanifest">
 
 
 
-  <!-- 引用自己的样式和js -->
 
+  <!-- 引用自己的样式 -->
 
   <link rel="stylesheet" href="./myCode/style.css">
 
   <link rel="stylesheet" href="./myCode/style.css">
 
-  <script src="./myCode/index.js"></script>
 
+
 
 
 
 
 
 </head>
 
 </head>
 
@@ -31,8 +31,17 @@
 
   <!-- 加载中文字 -->
 
   <!-- 加载中文字 -->
 
   <div id="lodingTxt">加载中...</div>
 
   <div id="lodingTxt">加载中...</div>
 
 
 
+  <!-- 开场视频 -->
 
+  <div class="videoBox">
 
+    <video src="./myCode/video.mp4" controls muted autoplay></video>
 
+    <div class="skipTxt">跳 过</div>
 
+  </div>
 
+
 
 
 
   <script>
 
   <script>
 
+    let unityExamples = null
 
+
 
+
 
     window.addEventListener("load", function () {
 
     window.addEventListener("load", function () {
 
       if ("serviceWorker" in navigator) {
 
       if ("serviceWorker" in navigator) {
 
         navigator.serviceWorker.register("ServiceWorker.js");
 
         navigator.serviceWorker.register("ServiceWorker.js");
 
@@ -118,6 +127,9 @@
 
     };
 
     };
 
     document.body.appendChild(script);
 
     document.body.appendChild(script);
 
   </script>
 
   </script>
 
+
 
+  <!-- 引入自己的js -->
 
+  <script src="./myCode/index.js"></script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 28 - 1
myCode/index.js
查看文件 

@@ -1 +1,28 @@
 
-let unityExamples = null
 
+// setTimeout(() => {
 
+//   console.log('-----unity实例', unityExamples);
 
+// }, 2000);
 
+
 
+const videoBox = document.querySelector('.videoBox')
 
+
 
+const videoDom = document.querySelector('.videoBox video')
 
+
 
+const videoBtnDom = document.querySelector('.skipTxt')
 
+
 
+
 
+// 自动播放视频
 
+videoDom.play()
 
+
 
+// 点击按钮，或者视频播放完毕的回调
 
+const videoPalyEnd = () => {
 
+  console.log('-------视频播放完毕，或者点击跳过--------');
 
+  document.querySelector('body').removeChild(videoBox)
 
+}
 
+
 
+videoDom.addEventListener('ended', function () {
 
+  videoPalyEnd()
 
+}, false)
 
+
 
+
 
+videoBtnDom.onclick = () => {
 
+  videoPalyEnd()
 
+}

+ 29 - 0
myCode/style.css
查看文件 

@@ -49,3 +49,32 @@ body #lodingTxt {
 
 #unity-progress-bar-full {
 
 #unity-progress-bar-full {
 
   display: none !important;
 
   display: none !important;
 
 }
 
 }
 
+.videoBox {
 
+  position: absolute;
 
+  z-index: 8000;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  background-color: black;
 
+}
 
+.videoBox video {
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  transform: translate(-50%, -50%);
 
+  max-width: 100%;
 
+  max-height: 100%;
 
+}
 
+.videoBox .skipTxt {
 
+  position: absolute;
 
+  z-index: 10;
 
+  right: 15px;
 
+  top: 15px;
 
+  width: 60px;
 
+  height: 30px;
 
+  background-color: rgba(0, 0, 0, 0.6);
 
+  line-height: 30px;
 
+  text-align: center;
 
+  color: #fff;
 
+}

+ 36 - 1
myCode/style.less
查看文件 

@@ -1,8 +1,9 @@
 
-*{
 
+* {
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
 }
 
 }
 
+
 
 body {
 
 body {
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
 
@@ -58,4 +59,38 @@ body {
 
 
 
 #unity-progress-bar-full {
 
 #unity-progress-bar-full {
 
   display: none !important;
 
   display: none !important;
 
+}
 
+
 
+
 
+// 视频盒子
 
+.videoBox {
 
+  position: absolute;
 
+  z-index: 8000;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  background-color: black;
 
+
 
+
 
+  video {
 
+    position: absolute;
 
+    top: 50%;
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+    max-width: 100%;
 
+    max-height: 100%;
 
+  }
 
+  .skipTxt{
 
+    position: absolute;
 
+    z-index: 10;
 
+    right: 15px;
 
+    top: 15px;
 
+    width: 60px;
 
+    height: 30px;
 
+    background-color: rgba(0,0,0,.6);
 
+    line-height: 30px;
 
+    text-align: center;
 
+    color: #fff;
 
+  }
 
 }
 
 }

二进制
myCode/video.mp4
查看文件