The JW players is a versitile tool for allowing your encodes to play the optimal version of your video in the correct browser. The JW player team put out a great article summarizing how to embed HTML5 as default with a flash fallback.
<-- HideHTML5 Video
How do I use JW Player with the default HTML5 mode selected?
The JW players is a versitile tool for allowing your encodes to play the optimal version of your video in the correct browser. The JW player team put out a great article summarizing how to embed HTML5 as default with a flash fallback.
Do you have a quick summary of how HTML5 is going to impact my workflow?
http://diveintohtml5.info/video.html
The link above is an excellent in-depth article to HTML5 which explores the creation of files for HTML, and how to properly use the <video> element in HTML5 with your newly created content. A great excerpt for use with encoding.com:
"As you can tell, video (and audio) is a complicated subject — and
More -->
http://diveintohtml5.info/video.html
The link above is an excellent in-depth article to HTML5 which explores the creation of files for HTML, and how to properly use the <video> element in HTML5 with your newly created content. A great excerpt for use with encoding.com:
"As you can tell, video (and audio) is a complicated subject — and this was the abridged version! I’m sure you’re wondering how all of this relates to HTML5. Well, HTML5 includes a <video> element for embedding video into a web page. There are no restrictions on the video codec, audio codec, or container format you can use for your video. One <video> element can link to multiple video files, and the browser will choose the first video file it can actually play. It is up to you to know which browsers support which containers and codecs."
This brings up the discussion over why encoding.com is such a useful tool: the ability to deliver those formats as needed to the client web server and get video support for all of the browsers. Here's a list of the containers which will likely be commonly seen in HTML5: MP4, OGV, FLV, WEBM, AVI. All of these are available via encoding.com (or will be shortly as of the writing of this article, with WEBM and OGV almost in beta), and will give the ability for deliver to all the major browsers supporting HTML5.
<-- Hide
How to encode and implement for HTML5 Video
Until the availability of the HTML5 video element, all the video we have ever watched within a browser has been played through third party browser plugins. First there was RealPlayer, then Windows Media Player and QuickTime, and most recently Flash (which is currently the dominant plugin that plays the majority of Internet video).
Within the HTML5
More -->
Until the availability of the HTML5 video element, all the video we have ever watched within a browser has been played through third party browser plugins. First there was RealPlayer, then Windows Media Player and QuickTime, and most recently Flash (which is currently the dominant plugin that plays the majority of Internet video).
Within the HTML5 specifications there is a new standard defined to embed and play video within a web page, WITHOUT the need for a third party plugin using a <video> element. Sounds easy, right? There is a catch…There is currently not a single video format that works in all HTML5 browsers and we believe this is not going to change anytime soon.
For a professional HTML5 video implementation we recommend encoding your video into the following formats for maximum compatibility across HTML5 browsers:
- Flash VP6 in a .flv format (Chose the "Flix VP6" preset from the encoding.com presets)
- H.264(Baseline) in a .mp4 container. (Chose the "Flash 9 H.264" from the encoding.com presets)
- VP8/WEBM in a .webm container. (Chose "WEBM" from the encoding.com presets)
- Theroa/Vorbis in a .ogv container. (Chose "Theora" from the encoding.com presets)
HTML5 Video markup example (single video)
HTML5 gives you two ways to embed and play video within a web page. Both of them involve the <video> element. If you only have one video file, you can simply link to it in a src attribute. This is exactly like the image tag that we all know and love <img src="..."> tag.
For example: <video src="myvideo.ogv"></video>
As with the <img> tag, you should always include width and height attributes in your <video> tags. The width and height attributes should be the same as the dimensions you specified during the encoding process. If one dimension of the video is a little smaller than the width or height the browser will center the video inside the box defined by the <video> tag, rather than stretching of squishing the video.
For example: <video src="myvideo.webm" width="640" height="480"></video>
By default, the <video> element will not display the video of player controls. You can create your own controls with HTML, CSS, and JavaScript. The <video> element supports the following method, play and pause , currentTime , volume , muted
For example: <video src="myvideo.webm" width="640" height="480" controls></video>
HTML5 video also supports preload and autoplay. The preload attribute tells the browser that you would like it to start downloading the video as soon the page loads. If you want o minimize bandwidth on your pages and ensure that a video is not downloaded unless the user actually watches it you can set preload to none.
For example: <video src="myvideo.webm" width="640" height="480" preload></video> or <video src="myvideo2.webm" width="640" height="480" preload="none"></video>
The autoplay attribute will not only start downloading the video when the page loads but also start playing the video (without the user clicking the play button)
For example: <video src="myvideo2.webm" width="640" height="480" autoplay></video>
HTML5 Video markup example (multiple videos)
Since each browser supports a different video format, (see our recommendations above) it is important to create a video element that supports the multiple video formats you have prepared for each browser. Each <video> element can container multiple <source> elements and the browser will go down the list of video sources in the order they are listed and play the first one it is able to play. This however is a waste of time and bandwidth and creates a bad user experience so it is important to tell the browser which type of video is which with the <source> element so each browser will only play the video it supports.
For example:
<video width="640" height="480" controls>
<source src="myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="myvideo.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>
NOTE: We recommend you always list the .mp4 H.264 file in your list first for compatibility with old version of iOS (older than 4)
The type attribute containers three pieces of information: MIME type, video codec, audio codec. So in the example above for the video myvideo.mp4. The MIME type is video/mp4, the video codec is "avc1.42E01E" and the audio codes is "mp4a.40.2"
NOTE: The type values have to be included in quotation marks so you need to add another type of quotation mark to surround the entire value. For example: type='video/ogg; codecs="theora, vorbis"'
NOTE: Encoding.com will automatically set the correct MIME type for your output files. If you are using Amazon S3 as an output destination you can set custom MIME types. Visit this article for more details.
<-- Hide
