|Home||Getting Started||Download||Buy Now!||Screen Shots||Support||Contact|
HTML5 video is a new element introduced in the HTML5 for the purpose of playing videos or movies, partially replacing the object element. The Flash is using object element. HTML5 video is intended by its creators to become the new standard way to show video online, but has been hampered by lack of agreement as to which video formats should be supported in the video element. Now, there're three formats the video element supports: H.264, OGG Theora, and WebM. Different web browsers support different file formats. Refer to the following table.
So, you need to create 3 formats for your every video. However, from the table above, two formats is enough: H.264+OGG Theora, or H.264+WebM. It's your choice to create 2 or 3 formats for your video according to your situation. We recommend creating all the 3 formats.
First, convert your video file to H.264, OGG Theora, and WebM.
We recommend you a great video converter - Total Video Audio Converter that supports all of the H.264, OGG Theora, and WebM formats.
Click "Add Files" to choose video files.
Choose one or more video files you want to convert and then click Open.
Click on combo-box of output format and then choose "to OGV". Why not "to OGG"? Because the OGG is also extension of OGG audio; the OGV is OGG Video.
To convert to H.264, please choose "to H.264 (*.mp4)".
To convert to WebM, please choose "to WebM (*.webm)".
Second, embed video on your web page using video element.
It's quite simple. Just insert <video> and </video> code block to where you want the video to be on your web page. The code block might look something like this:
To specify multiple sources, the code block might look something like this:
You can use the following optional attributes for video element.
Attributes for source element.
If you want to show some information for the web browser that doesn't support video element, you could add some text like this:
So, let's view a sample video.
Code of video above is:
The video above doesn't play on compatible web browser? Oh, I forgot to say another important factor. It's MIME-type on web server side. As the Firefox won't play the OGG video if the MIME-type is wrong.
And then, you can check if the MIME-type/Content-Type is set correctly using the Web Sniffer.
If you're using the Safari and it doesn't play video above, please make sure the QuickTime has been installed on your computer.
To be compatible with IE9, you need to add the following line in first line of your webpage file. The line makes Internet Explorer 9 displays webpages that contain the HTML5 document type in IE9 Standards mode. Click here to get more detailed information.
Is the video above compatible with iPhone/iPad/iPod? Yes, it is. However, the iPhone/iPad/iPod only plays H.264 (.mp4), and the MP4 must be encoded with "H.264 Baseline Profile". And, it's possible with the Total Video Audio Converter. Before converting to H.264, please click Options on the Total Video Audio Converter, and then choose "H.264 (Baseline Profile)" at Codec, refer to the following screen shot.
And then, convert your video to H.264 (*.mp4). The outputted MP4 file will works on iPhone/iPad/iPod.
Embed Video on Website Related Topics:
|Home | Getting Started | Download | Buy Now! | Screen Shots | Support | Contact | Links|