first commit
This commit is contained in:
编码猿
7
README.md
Normal file
7
README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# Web 播放 VR视频
|
||||
|
||||
基于 `aframe` 播放VR视频，使用方式，地址栏传入VR视频的播放地址即可，例如：
|
||||
|
||||
```bash
|
||||
index.html?url=VR视频地址
|
||||
```
|
||||
1
aframe-stereo-component.min.js
vendored
Normal file
1
aframe-stereo-component.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
!function(e){function t(a){if(i[a])return i[a].exports;var r=i[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){!function(){if(!AFRAME)return void console.error("Component attempted to register before AFRAME was available.");var e={stereo:i(1).stereo_component,stereocam:i(1).stereocam_component};Object.keys(e).forEach(function(t){AFRAME.aframeCore?AFRAME.aframeCore.registerComponent(t,e[t]):AFRAME.registerComponent(t,e[t])})}()},function(e,t){e.exports={stereo_component:{schema:{eye:{type:"string",default:"left"},mode:{type:"string",default:"full"},split:{type:"string",default:"horizontal"},playOnClick:{type:"boolean",default:!0}},init:function(){if(this.video_click_event_added=!1,this.material_is_a_video=!1,null!==this.el.getAttribute("material")&&"src"in this.el.getAttribute("material")&&""!==this.el.getAttribute("material").src){var e=this.el.getAttribute("material").src;"object"==typeof e&&"tagName"in e&&"VIDEO"===e.tagName&&(this.material_is_a_video=!0)}var t=this.el.object3D.children[0],i=[THREE.SphereGeometry,THREE.BufferGeometry],a=i.some(function(e){return t.geometry instanceof e});if(a&&this.material_is_a_video){if("half"===this.data.mode)var r=this.el.getAttribute("geometry"),o=new THREE.SphereGeometry(r.radius||100,r.segmentsWidth||64,r.segmentsHeight||64,Math.PI/2,Math.PI,0,Math.PI);else var r=this.el.getAttribute("geometry"),o=new THREE.SphereGeometry(r.radius||100,r.segmentsWidth||64,r.segmentsHeight||64);t.rotation.y=Math.PI/2;for(var n="horizontal"===this.data.split?"y":"x",s="left"===this.data.eye?"y"===n?{x:0,y:0}:{x:0,y:.5}:"y"===n?{x:.5,y:0}:{x:0,y:0},l="y"===n?{x:.5,y:1}:{x:1,y:.5},c=o.attributes.uv,h=0;h<c.count;h++){var d=c.getX(h)*l.x+s.x,y=c.getY(h)*l.y+s.y;c.setXY(h,d,y)}c.needsUpdate=!0,this.originalGeometry=t.geometry,t.geometry=o}else this.video_click_event_added=!0},remove:function(){var e=this.el.object3D.children[0];e.geometry.dispose(),this.originalGeometry&&(e.geometry=this.originalGeometry)},update:function(e){var t=this.el.object3D.children[0],i=this.data;"both"===i.eye?t.layers.set(0):t.layers.set("left"===i.eye?1:2)},tick:function(e){if(!this.video_click_event_added&&this.data.playOnClick&&"undefined"!=typeof this.el.sceneEl.canvas){this.videoEl=this.el.object3D.children[0].material.map.image;var t=this;this.el.sceneEl.canvas.onclick=function(){t.videoEl.play()},this.video_click_event_added=!0}}},stereocam_component:{schema:{eye:{type:"string",default:"left"}},init:function(){this.layer_changed=!1},tick:function(e){var t=this.data;if(!this.layer_changed){var i=[];this.el.object3D.children.forEach(function(e,t,a){i[t]=e.type});var a=i.indexOf("PerspectiveCamera"),r=this.el.object3D.children[a];"both"===t.eye?(r.layers.enable(1),r.layers.enable(2)):r.layers.enable("left"===t.eye?1:2),this.layer_changed=!0}}}}}]);
|
||||
2
aframe.min.js
vendored
Normal file
2
aframe.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
129
index.html
Normal file
129
index.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user