|
|
@@ -26,10 +26,52 @@
|
|
|
z-index:100;
|
|
|
}
|
|
|
|
|
|
+ #overlay {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height:100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ opacity: 1;
|
|
|
+ background-color: #000000;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ #overlay > div {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #overlay > div > button {
|
|
|
+ height: 20px;
|
|
|
+ width: 100px;
|
|
|
+ background: transparent;
|
|
|
+ color: #ffffff;
|
|
|
+ outline: 1px solid #ffffff;
|
|
|
+ border: 0px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ #overlay > div > p {
|
|
|
+ color: #777777;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
+ <div id="overlay">
|
|
|
+ <div>
|
|
|
+ <button id="startButton">Click to Play</button>
|
|
|
+ <p>Automatic video playback with audio requires a user interaction.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="container"></div>
|
|
|
+
|
|
|
<div id="info">
|
|
|
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl video demo. playing <a href="http://durian.blender.org/" target="_blank" rel="noopener">sintel</a> trailer
|
|
|
</div>
|
|
|
@@ -47,7 +89,7 @@
|
|
|
|
|
|
<script src="js/WebGL.js"></script>
|
|
|
|
|
|
- <video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
|
|
|
+ <video id="video" loop crossOrigin="anonymous" webkit-playsinline style="display:none">
|
|
|
<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
|
|
|
<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
|
|
|
</video>
|
|
|
@@ -82,11 +124,19 @@
|
|
|
xgrid = 20,
|
|
|
ygrid = 10;
|
|
|
|
|
|
- init();
|
|
|
- animate();
|
|
|
+ var startButton = document.getElementById( 'startButton' );
|
|
|
+ startButton.addEventListener( 'click', function () {
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ }, false );
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
+ var overlay = document.getElementById( 'overlay' );
|
|
|
+ overlay.remove();
|
|
|
+
|
|
|
container = document.createElement( 'div' );
|
|
|
document.body.appendChild( container );
|
|
|
|
|
|
@@ -105,6 +155,7 @@
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
video = document.getElementById( 'video' );
|
|
|
+ video.play();
|
|
|
|
|
|
texture = new THREE.VideoTexture( video );
|
|
|
|
Mugen87