Examples: Fix webgl_material_video for Chrome and Safari

7eab9ef3 · Mugen87 · 64f677b2 · 7eab9ef3
显示空白变更内容
内联并排

Showing with 54 addition and 3 deletion

examples/webgl_materials_video.html examples/webgl_materials_video.html +54 -3

未找到文件。
--- a/examples/webgl_materials_video.html
+++ b/examples/webgl_materials_video.html
@@ -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;
+			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 );