Merge pull request #15761 from Mugen87/dev23

mrdoob · web-flow · commit 173a5808704e · 2019-02-12T18:29:29.000-08:00
Examples: Fix webgl_material_video for Chrome and Safari
diff --git 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;
 
-			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 );
 
