forked from EXT/VR180-Web-Player
Aiden
@@ -57,7 +57,7 @@ When the page loads, the media is embedded normally with an entry button over it
|
||||
- Control icons are embedded from [Lucide](https://lucide.dev/) SVG definitions, so no PNG icon assets are required.
|
||||
|
||||
## Demo
|
||||
Run `npm run build`, then open this repository's `index.html` through a local web server and switch `data-projection` between `vr180` and `plane` to test both modes.
|
||||
Run `npm run build`, then open this repository's `index.html` through a local web server. The index page links to focused test pages for flat 3D image, VR180 3D image, flat 3D video, and VR180 3D video.
|
||||
|
||||
For local experimentation, run:
|
||||
|
||||
|
||||
139
demo.css
Normal file
139
demo.css
Normal file
@@ -0,0 +1,139 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #151515;
|
||||
background: #f4f4f2;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.demo-page {
|
||||
min-height: 100vh;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.demo-shell {
|
||||
width: min(100%, 1040px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.demo-brand {
|
||||
margin: 0;
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.demo-kicker {
|
||||
margin: 8px 0 0;
|
||||
max-width: 700px;
|
||||
color: #555;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #c7c7c0;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.demo-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-height: 150px;
|
||||
padding: 18px;
|
||||
border: 1px solid #d5d5cf;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
text-decoration: none;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.demo-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #83837a;
|
||||
}
|
||||
|
||||
.demo-card h2 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.demo-card p,
|
||||
.demo-meta {
|
||||
margin: 0;
|
||||
color: #5c5c55;
|
||||
}
|
||||
|
||||
.demo-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
color: #66665f;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.demo-player {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.demo-player-frame {
|
||||
width: min(100%, 960px);
|
||||
}
|
||||
|
||||
.demo-note {
|
||||
max-width: 760px;
|
||||
margin: 18px 0 0;
|
||||
color: #606058;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.demo-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.demo-topbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demo-brand {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
55
index.html
55
index.html
@@ -3,29 +3,44 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>VR Web Player</title>
|
||||
<link rel="stylesheet" href="./vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 750px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<title>VR Web Player Test Pages</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>VR Web Player</h1>
|
||||
<p>This is a web-based player for side-by-side stereoscopic media.</p>
|
||||
<div data-vr-web-player data-projection="plane">
|
||||
<img src="media/169_3d_test.png" alt="Demo SBS image" title="Demo SBS Image" crossorigin="anonymous">
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">VR Web Player Tests</h1>
|
||||
<p class="demo-kicker">Open a focused page for each media and projection combination.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="demo-grid" aria-label="Player test pages">
|
||||
<a class="demo-card" href="./test-3d-image.html">
|
||||
<h2>3D Image</h2>
|
||||
<p>Flat SBS image on a rectangular plane.</p>
|
||||
<span class="demo-meta">image / plane</span>
|
||||
</a>
|
||||
<a class="demo-card" href="./test-vr180-3d-image.html">
|
||||
<h2>VR180 3D Image</h2>
|
||||
<p>SBS image on the VR180 hemisphere.</p>
|
||||
<span class="demo-meta">image / vr180</span>
|
||||
</a>
|
||||
<a class="demo-card" href="./test-3d-video.html">
|
||||
<h2>3D Video</h2>
|
||||
<p>Flat SBS video on a rectangular plane.</p>
|
||||
<span class="demo-meta">video / plane</span>
|
||||
</a>
|
||||
<a class="demo-card" href="./test-vr180-3d-video.html">
|
||||
<h2>VR180 3D Video</h2>
|
||||
<p>SBS video on the VR180 hemisphere.</p>
|
||||
<span class="demo-meta">video / vr180</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<p class="demo-note">Image tests use <code>media/169_3d_test.png</code>. Video tests expect <code>media/sbs-video.mp4</code>.</p>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
28
test-3d-image.html
Normal file
28
test-3d-image.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>3D Image Test</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="./vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell demo-player">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">3D Image</h1>
|
||||
<p class="demo-kicker">Projection: plane. Media: side-by-side image.</p>
|
||||
</div>
|
||||
<a class="demo-back" href="./index.html">Back</a>
|
||||
</header>
|
||||
|
||||
<div class="demo-player-frame" data-vr-web-player data-projection="plane">
|
||||
<img src="media/169_3d_test.png" alt="Demo SBS image" title="3D Image Plane" crossorigin="anonymous">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
30
test-3d-video.html
Normal file
30
test-3d-video.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>3D Video Test</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="./vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell demo-player">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">3D Video</h1>
|
||||
<p class="demo-kicker">Projection: plane. Media: side-by-side video.</p>
|
||||
</div>
|
||||
<a class="demo-back" href="./index.html">Back</a>
|
||||
</header>
|
||||
|
||||
<div class="demo-player-frame" data-vr-web-player data-projection="plane">
|
||||
<video poster="poster.jpg" title="3D Video Plane" crossorigin="anonymous" playsinline preload="metadata">
|
||||
<source src="media/sbs-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
28
test-vr180-3d-image.html
Normal file
28
test-vr180-3d-image.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>VR180 3D Image Test</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="./vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell demo-player">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">VR180 3D Image</h1>
|
||||
<p class="demo-kicker">Projection: VR180. Media: side-by-side image.</p>
|
||||
</div>
|
||||
<a class="demo-back" href="./index.html">Back</a>
|
||||
</header>
|
||||
|
||||
<div class="demo-player-frame" data-vr-web-player data-projection="vr180">
|
||||
<img src="media/169_3d_test.png" alt="Demo VR180 SBS image" title="VR180 3D Image" crossorigin="anonymous">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
30
test-vr180-3d-video.html
Normal file
30
test-vr180-3d-video.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>VR180 3D Video Test</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="./vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell demo-player">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">VR180 3D Video</h1>
|
||||
<p class="demo-kicker">Projection: VR180. Media: side-by-side video.</p>
|
||||
</div>
|
||||
<a class="demo-back" href="./index.html">Back</a>
|
||||
</header>
|
||||
|
||||
<div class="demo-player-frame" data-vr-web-player data-projection="vr180">
|
||||
<video poster="poster.jpg" title="VR180 3D Video" crossorigin="anonymous" playsinline preload="metadata">
|
||||
<source src="media/sbs-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user