What is this project about
This series of posts have been developed as a result of a project undertaken by Learning Development that explored different ways video and subtitles could be incorporated into a HTML5 based website.The video was first incorporated into the website, then tested on new and old browsers and on mobile devices such as iPad, iPod, Android Phone and an Android tablet. The testing was designed to ensure that video was visible and usable in all new and old browsers and did not lack accessibility features such as subtitles.
The posts will provide advice and instructions on how to incorporate video into a HTML5 based website. They will:
- discuss video formats required for HTML5 video
- discuss subtitle formats and use in HTML5
- identify some compression software that may help produce video in the right formats*
*Note: The posts discuss compression formats but do not cover video compression techniques in great detail.
What is HTML and HTML5?
HTML is a code language which is used to develop webpages. It is the code that makes webpages look and act the way they do. For example, HTML coding will tell the webpage what text colours to use, what to do when the user clicks on a link, when to play a video, or what happens when the user rolls the mouse over an image. HTML5 is the name given to the updated HTML standard.Almost every web page on the internet is made with, or incorporates, HTML. HTML was developed initially in 1990 by Tim Berners-Lee and was last updated to its current standard in 2000. However, since the introduction of mobile devices there has been a need to adapt the current HTML standard to suit these emerging technologies. For example, HTML is now being upgraded to include interactive features such as video and audio which can be viewed without 3rd party plugins.
Although HTML5 is still in the process of developing, it is expected that HTML5 will soon replace current HTML technology and many developers and websites are making the transition now.
Is HTML5 widely supported?
To add a video into an HTML5 webpage, the tag <video>is added to the coding.All new browsers support the <video> tag and some or most of the recommended HTML5 features.
However, as HTML5 is currently under development it may be necessary to provide multiple video formats to be sure that the video will display in both old and new browsers (required video formats are discussed in the section Video Formats below).
To see how well your browser supports HTML5 visit http://html5test.com/.
Watching video on the web
The current HTML standard doesn’t support video being played directly from webpages. Therefore, in order to view videos attached to webpages, the user is required to download 3rd party plugins such as Flash or QuickTime.As 3rd party plugins, such as Flash, can drain the battery of mobile devices and affect performance overall, both Apple and Microsoft have made the decision to support the development of HTML5 as a way of replacing the need to download plugins*. In addition to this Adobe, the developer of the Flash player, have announced that it will no longer update its mobile Flash player and that it fully supports the proposed HTML5 standard.
*See Steve Jobs’ article ‘Thoughts on Flash’ http://www.apple.com/hotnews/thoughts-on-Flash/.
How to put video on my HTML5 webpage
Video formats
Currently, as of April 2012, HTML5 has not confirmed which video formats will be supported. In the meantime, to make sure all users of a site can see the video on any computer or mobile device, videos should be supplied in multiple formats. For example, the formats that must be offered at a minimum are:- MP4 (H.264)
- WebM
- OGG was used by earlier versions of Firefox and should be considered as a format still worth supplying
The HTML5 <video> tag works using a fall back method. This means that a browser that cannot view one video format, will fall back to using the next in the queue. If the browser still does not understand the video format it can keep looking through the <video> tag for more information or a format that it does understand.
Some very old browsers don’t support the HTML5 video tag at all. In this case another format that can be offered is the FLV file type. Flash also supports the MP4 video codec so it is not overly important to supply the FLV format type as well. The MP4 video must be H.264 encoded to work with a Flash video player.
Related posts:
Accessible HTML5 video for allHow to create a basic HTML5 webpage
Fall back to Flash
Current HTML5 subtitle support
Subtitle creation process
Link subtitles to video
Making subtitles work now
A Flash solution
Making it work now, on an Android device
Making it work now, on an Apple device
Thoughts on HTML5 video and subtitles - conclusion
As Firefox has messed up its support for the video tag Flash fallback fails. To play the same MP4 (it's the only codec with hardware support) played with Flash (for non MP4) you need to script a trap for non MP4 browsers (like FireFox and Chrome) and write the Flash fallback, then ELSE {write video tag with MP4}. I guess that's a Flash 'fall forward'?
ReplyDeletehttp://www.tantamount.com.au/video/
When choosing a organization that provides HTML5 Development
ReplyDeleteservices, you need to examine that the developers really have encounter in it. Moreover, the team operating on your project ought to have many creativeness. While you'll need top excellent services, it will certainly help your business to get these solutions at a reasonably low cost.