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