Examples: Autoplay sintel video, remove Play overlay.

mrdoob · claude · mrdoob · commit f3fa844ba4ca · 2026-04-15T21:00:50.000+09:00
Adds muted to the &lt;video&gt; element and drops the click-to-play overlay
so the sintel examples start playing immediately on page load. Matches
the pattern already used by webgl_video_kinect,
webgl_video_panorama_equirectangular, webgpu_video_panorama, etc.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/examples/webgl_materials_video.html b/examples/webgl_materials_video.html
@@ -8,17 +8,14 @@
 	</head>
 	<body>
 
-		<div id="overlay">
-			<button id="startButton">Play</button>
-		</div>
 		<div id="container"></div>
 
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl video demo<br/>
 			playing <a href="http://durian.blender.org/" target="_blank" rel="noopener">sintel</a> trailer
 		</div>
 
-		<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
+		<video id="video" loop muted crossOrigin="anonymous" 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>
@@ -63,18 +60,10 @@
 				xgrid = 20,
 				ygrid = 10;
 
-			const startButton = document.getElementById( 'startButton' );
-			startButton.addEventListener( 'click', function () {
-
-				init();
-
-			} );
+			init();
 
 			function init() {
 
-				const overlay = document.getElementById( 'overlay' );
-				overlay.remove();
-
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
diff --git a/examples/webgpu_materials_video.html b/examples/webgpu_materials_video.html
@@ -8,10 +8,6 @@
 	</head>
 	<body>
 
-		<div id="overlay">
-			<button id="startButton">Play</button>
-		</div>
-
 		<div id="container"></div>
 
 		<div id="info">
@@ -26,7 +22,7 @@
 			</small>
 		</div>
 
-		<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
+		<video id="video" loop muted crossOrigin="anonymous" 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>
@@ -66,18 +62,10 @@
 				xgrid = 20,
 				ygrid = 10;
 
-			const startButton = document.getElementById( 'startButton' );
-			startButton.addEventListener( 'click', function () {
-
-				init();
-
-			} );
+			init();
 
 			function init() {
 
-				const overlay = document.getElementById( 'overlay' );
-				overlay.remove();
-
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
