StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <code>progress</code> event is fired when some data has been downloaded, <a href="http://www.w3.org/TR/html5/embedded-content-0.html#concept-media-load-resource">up to three times per second.</a> The browser provides a list of ranges of available media through the <code>buffered</code> property; a thorough guide to this is available on <a href="https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a> on MDN.</p> <h2>Single load start</h2> <p>If the user doesn't skip through the video, the file will be loaded in one <code>TimeRange</code> and the <code>buffered</code> property will have one range:</p> <pre><code>------------------------------------------------------ |=============| | ------------------------------------------------------ 0 5 21 | \_ this.buffered.end(0) | \_ this.buffered.start(0) </code></pre> <p>To know how big that range is, read it this way:</p> <pre><code>video.addEventListener('progress', function() { var loadedPercentage = this.buffered.end(0) / this.duration; ... // suggestion: don't use this, use what's below }); </code></pre> <h2>Multiple load starts</h2> <p>If the user changes the playhead position while it's loading, a new request may be triggered. This causes the <code>buffered</code> property to be fragmented:</p> <pre><code>------------------------------------------------------ |===========| |===========| | ------------------------------------------------------ 1 5 15 19 21 | | | \_ this.buffered.end(1) | | \_ this.buffered.start(1) | \_ this.buffered.end(0) \_ this.buffered.start(0) </code></pre> <p>Notice how the number of the buffer changes. </p> <p>Since it's no longer a contiguous <em>loaded</em>, the "percentage loaded" doesn't make a lot of sense anymore. You want to know what the current <code>TimeRange</code> is and how much of that is loaded. In this example you get where the load bar should <strong>start</strong> (since it's not 0) and where it should end.</p> <pre><code>video.addEventListener('progress', function() { var range = 0; var bf = this.buffered; var time = this.currentTime; while(!(bf.start(range) <= time && time <= bf.end(range))) { range += 1; } var loadStartPercentage = bf.start(range) / this.duration; var loadEndPercentage = bf.end(range) / this.duration; var loadPercentage = loadEndPercentage - loadStartPercentage; ... }); </code></pre>

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