first commit

2025-02-04 18:55:05 +08:00
commit 0965dfbfa8
5 changed files with 139 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>360 Video</title>
+    <script src="./aframe.min.js"></script>
+    <script src="./aframe-stereo-component.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://at.alicdn.com/t/font_1980004_lnqny5kta9g.css"
+    />
+    <style>
+      .main {
+        position: relative;
+        height: 100vh;
+      }
+      .main .controls {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        z-index: 999999;
+        top: 30px;
+        width: 80%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .main .play {
+        margin-right: 20px;
+        color: #fff;
+        font-size: 23px;
+        cursor: pointer;
+      }
+      .main input {
+        flex: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <div class="controls">
+        <i class="play iconfont icon-play"></i>
+        <input class="progress-bar" type="range" min="0" max="100" value="0" />
+      </div>
+      <a-scene>
+        <video
+          id="antarctica"
+          controls
+          preload="auto"
+          loop="true"
+          crossorigin="anonymous"
+          src=""
+        ></video>
+
+        <a-camera
+          fov="100"
+          reverse-mouse-drag="true"
+          position="0 0 0"
+          stereocam="eye:left;"
+        ></a-camera>
+
+        <a-entity
+          geometry="primitive: sphere;
+                      radius: 100;
+                      segmentsWidth: 64;
+                      segmentsHeight: 64;"
+          material="shader: flat; src: #antarctica; side:back;"
+          scale="-1 1 1"
+          stereo="eye:left;mode:half;playOnClick:false;"
+        >
+        </a-entity>
+
+
+       <a-sky color="#000"></a-sky>
+
+      </a-scene>
+    </div>
+  </body>
+  <script>
+    // https://video.buyusdt.xyz/Videos/d412339fc42f567c10ba250e6dab7bab/stream.mp4?Static=true&mediaSourceId=d412339fc42f567c10ba250e6dab7bab&deviceId=TW96aWxsYS81LjAgKE1hY2ludG9zaDsgSW50ZWwgTWFjIE9TIFggMTBfMTVfNykgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzEzMS4wLjAuMCBTYWZhcmkvNTM3LjM2fDE3Mzc3MzM2MDQwNTc1&api_key=a70e5f83b31247e596395a5cb3bdeac1&Tag=04e2f73540d73a5c4ab8ee9416fcdd47#t=262.09476
+    let video = $("#antarctica"),
+      progressBar = $(".progress-bar"),
+      play = $(".play");
+
+    video.src = query("url");
+
+    play.onclick = async () => {
+      video.volume = 1;
+      if (video.paused) {
+        await video.play();
+        play.classList.replace("icon-play", "icon-tingzhi1");
+      } else {
+        await video.pause();
+        play.classList.replace("icon-tingzhi1", "icon-play");
+      }
+    };
+
+    // 监听视频的loadedmetadata事件，设置进度条的最大值
+    video.addEventListener("loadedmetadata", function () {
+      progressBar.max = video.duration;
+    });
+
+    // 监听进度条的input事件
+    let debounceTimeout;
+    progressBar.addEventListener("input", function () {
+      video.currentTime = progressBar.value;
+    });
+
+    // 监听视频的timeupdate事件
+    video.addEventListener("timeupdate", function () {
+      progressBar.value = video.currentTime;
+    });
+
+    // 监听视频的ended事件，重置进度条
+    video.addEventListener("ended", function () {
+      progressBar.value = 0;
+    });
+
+    function $(className) {
+      return document.querySelector(className);
+    }
+
+    function query(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) return unescape(r[2]);
+      return null;
+    }
+  </script>
+</html>