In this article we are going to see how to play a video and audio file in HTML5. For this we are going to create a example like below one both are players one play video and another one plays audio.
Video
Audio
For play the video and audio file in Html5 we have two new tags, video and audio tag
In video tag supply the source in the childrens tag with alternate ones if first one failed to load , then next will load, default image can be displayed we can set the size of the control, to visible the options menu panel declare the control attribute on video tag
This plays the mp4 file in browsers supporting the mpeg-4 format. If the browser doesn't support mp4, the browser uses the ogg file.
See also the list of media formats supported by the audio and video elements in different browsers.
Code:
From this article you can see how to load a video and audio files in HTML5.
Video
Audio
For play the video and audio file in Html5 we have two new tags, video and audio tag
In video tag supply the source in the childrens tag with alternate ones if first one failed to load , then next will load, default image can be displayed we can set the size of the control, to visible the options menu panel declare the control attribute on video tag
This plays the mp4 file in browsers supporting the mpeg-4 format. If the browser doesn't support mp4, the browser uses the ogg file.
See also the list of media formats supported by the audio and video elements in different browsers.
audio/wave(preferred)audio/wavaudio/x-wavaudio/x-pn-wavvideo/webmaudio/webmaudio/oggvideo/oggapplication/oggvideo/mp4
| Feature | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|
| Basic support | 3.0 | 3.5 (1.9.1) | 9.0 | 10.50 | 3.1 |
<audio>: PCM in WAVE | (Yes) | 3.5 (1.9.1) | Not supported | 10.50 | 3.1 |
<audio>: Vorbis in WebM | (Yes) | 4.0 (2.0) | Not supported | 10.60 | 3.1 (must be installed separately) |
<audio>: Vorbis in Ogg | (Yes) | 3.5 (1.9.1) | Not supported | 10.50 | 3.1 (must be installed separately, e.g. XiphQT) |
| <audio>: MP3 | (Yes) (Not in Chromium) | Partial (see below) | 9.0 | Not supported | 3.1 |
<audio>: MP3 in MP4 | |||||
<audio>: AAC in MP4 |
(Yes) (Main only) (Not in Chromium)
|
Partial (see below)
| 9.0 | Not supported | 3.1 |
<audio>: Opus in Ogg | 27.0 | 15.0 (15.0) | |||
<video>: VP8 and Vorbis in WebM | 6.0 | 4.0 (2.0) | 9.0 (must be installed separately, e.g. WebM MF) | 10.60 | 3.1 (must be installed separately, e.g. Perian) |
<video>: VP9 and Opus in WebM | 29.0 | 28.0 (28.0) | |||
<video>: Theora and Vorbis in Ogg | (Yes) | 3.5 (1.9.1) | Not supported | 10.50 | 3.1 (must be installed separately, e.g. XiphQT) |
<video>: H.264 and MP3 in MP4 |
(Yes) (Not in Chromium)
| Partial (see below) | 9.0 | Not supported | Not supported |
<video>: H.264 and AAC in MP4 |
(Yes) (Not in Chromium)
| Partial (see below) | 9.0 | Not supported | 3.1 |
Code:
<video style="width: 500px;height: 500px" controls>
<source src="Apple%20-%20Think%20Different%20Commercial.mp4" type="video/mp4">
<source src="Apple%20-%20Think%20Different%20Commercial.ogg" type="video/ogg">
Your Browser doesnt support the
<code>video</code> element
</video>
<audio src="Apple%20-%20Think%20Different%20Commercial.mp4" style="width: 500px;height: 500px" controls>
</audio>
From this article you can see how to load a video and audio files in HTML5.
No comments:
Post a Comment