130 lines
3.5 KiB
HTML
130 lines
3.5 KiB
HTML
<!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>
|