<pclass="legacydocsnote">This documentation is for an outdated version of Video.js. See <ahref="https://docs.videojs.com/tutorial-tech.html">documentation for the current release</a>.
<p>Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.</p>
<p>Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.</p>
<h2id="building-an-api-wrapper">Building an API Wrapper</h2>
<p>We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the <ahref="https://github.com/zencoder/video-js/tree/master/src">Video.js</a> source where you can see how both the HTML5 and video-js.swf API wrappers were created.</p>
<h2id="required-methods">Required Methods</h2>
<p>canPlayType
play
pause
currentTime
volume
duration
buffered
supportsFullScreen</p>
<h2id="required-events">Required Events</h2>
<p>loadstart
play
pause
playing
ended
volumechange
durationchange
error</p>
<h2id="optional-events-include-if-supported-">Optional Events (include if supported)</h2>
<p>By default Video.js performs "Tech-first" ordering when it searches for a source/tech combination to play videos. This means that if you have two sources and two techs, video.js will try to play each video with the first tech in the <code>techOrder</code> option property before moving on to try the next playback technology.</p>
<p>Tech-first ordering can present a problem if you have a <code>sourceHandler</code> that supports both <code>Html5</code> and <code>Flash</code> techs such as videojs-contrib-hls.</p>
<p>For example, given the following video element:</p>
<p>There is a good chance that the mp4 source will be selected on platforms that do not have media source extensions. Video.js will try all sources against the first playback technology, in this case <code>Html5</code>, and select the first source that can play - in this case MP4.</p>
<p>In "Tech-first" mode, the tests run something like this:
Can video.m3u8 play with Html5? No...
Can video.mp4 play with Html5? Yes! Use the second source.</p>
<p>Video.js now provides another method of selecting the source - "Source-first" ordering. In this mode, Video.js tries the first source against every tech in <code>techOrder</code> before moving onto the next source.</p>
<p>The Flash-based HLS support will be tried before falling back to the MP4 source.</p>
<p>In "Source-first" mode, the tests run something like this:
Can video.m3u8 play with Html5? No...
Can video.m3u8 play with Flash? Yes! Use the first source.</p>
<h1id="flash-technology">Flash Technology</h1>
<p>The Flash playback tech is a part of the default <code>techOrder</code>. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.</p>
<p>In order to force the Flash tech to choose streaming playback, you need to provide a valid streaming source <strong>before other valid Flash video sources</strong>. This is necessary because of the source selection algorithm, where playback tech chooses the first possible source object with a valid type. Valid streaming <code>type</code> values include <code>rtmp/mp4</code> and <code>rtmp/flv</code>. The streaming <code>src</code> value requires valid connection and stream strings, separated by an <code>&</code>. An example of supplying a streaming source through your HTML markup might look like:</p>
