Skip to content

Commit f3fa844

Browse files
mrdoobclaude
andcommitted
Examples: Autoplay sintel video, remove Play overlay.
Adds muted to the <video> 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) <noreply@anthropic.com>
1 parent 4a48e81 commit f3fa844

2 files changed

Lines changed: 4 additions & 27 deletions

File tree

examples/webgl_materials_video.html

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,14 @@
88
</head>
99
<body>
1010

11-
<div id="overlay">
12-
<button id="startButton">Play</button>
13-
</div>
1411
<div id="container"></div>
1512

1613
<div id="info">
1714
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl video demo<br/>
1815
playing <a href="http://durian.blender.org/" target="_blank" rel="noopener">sintel</a> trailer
1916
</div>
2017

21-
<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
18+
<video id="video" loop muted crossOrigin="anonymous" playsinline style="display:none">
2219
<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
2320
<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
2421
</video>
@@ -63,18 +60,10 @@
6360
xgrid = 20,
6461
ygrid = 10;
6562

66-
const startButton = document.getElementById( 'startButton' );
67-
startButton.addEventListener( 'click', function () {
68-
69-
init();
70-
71-
} );
63+
init();
7264

7365
function init() {
7466

75-
const overlay = document.getElementById( 'overlay' );
76-
overlay.remove();
77-
7867
container = document.createElement( 'div' );
7968
document.body.appendChild( container );
8069

examples/webgpu_materials_video.html

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
</head>
99
<body>
1010

11-
<div id="overlay">
12-
<button id="startButton">Play</button>
13-
</div>
14-
1511
<div id="container"></div>
1612

1713
<div id="info">
@@ -26,7 +22,7 @@
2622
</small>
2723
</div>
2824

29-
<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
25+
<video id="video" loop muted crossOrigin="anonymous" playsinline style="display:none">
3026
<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
3127
<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
3228
</video>
@@ -66,18 +62,10 @@
6662
xgrid = 20,
6763
ygrid = 10;
6864

69-
const startButton = document.getElementById( 'startButton' );
70-
startButton.addEventListener( 'click', function () {
71-
72-
init();
73-
74-
} );
65+
init();
7566

7667
function init() {
7768

78-
const overlay = document.getElementById( 'overlay' );
79-
overlay.remove();
80-
8169
container = document.createElement( 'div' );
8270
document.body.appendChild( container );
8371

0 commit comments

Comments
 (0)