StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Aside from the "interesting" way that you are adding the videos to the HTML, you should rather rely on <a href="http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents" rel="nofollow">HTML5 media events</a>.</p> <p>First of all, if you want the videos to actually load automatically, don't use <code>preload="metadata"</code>, as that'll only load the video metadata. Setting preload to <code>"auto"</code> should help. Alternatively, you could leave it out completely, since <code>auto</code> is the default value. (Though it seems that whenever Opera adds support for this attribute, they might make it default to <code>"metadata"</code>, so you might still be better off setting it explicitly to <code>"auto"</code>.)</p> <p>AFter that, get rid of the whole XHR mess. Then, you could do something like this:</p> <pre><code>var videos = document.getElementsByTagName('video'); for(var i = 0, ii = videos.length; i < ii; i++) { videos[i].addEventListener('canplaythrough',enablePlayback,false); } var videosLoaded = 0; function enablePlayback(e) { videosLoaded++; if(videosLoaded === 16) { // enable a play button or do whatever you want // in this case: start playing all the videos at once for(var i = 0, ii = videos.length; i < ii; i++) { videos[i].play(); } } } </code></pre> <p>This code basically adds a listener for the <code>canplaythrough</code> event to all the videos, then as each video fires it, they'll increment the <code>videosLoaded</code> variable by one, and when the last video calls it and the <code>videosLoaded</code> hits 16 (the number of videos in your 4x4 grid), it'll call the <code>play()</code> on all the video objects.</p> <p>You'll probably have to experiment with this quite a bit to get it right (I don't happen to have 16 small and short videos at hand myself to test this adequately), but this should take you to the right direction. You might want to look into <code>video.load()</code> as well if <code>preload="auto"</code> isn't downloading all the videos (could happen since there's so many of them).</p> <p>If neither the <code>video.load()</code> nor <code>preload="auto"</code> seem to do the trick, you could set all videos to autoplay, then listen for the <code>play</code> event and pause them instantly (and then remove the <code>play</code> event listener). After that, have the same code for <code>canplaythrough</code> as before.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload