Saturday, 2 August 2014

Play a Video and audio in Html5

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.


  • audio/wave (preferred)
  • audio/wav
  • audio/x-wav
  • audio/x-pn-wav
  • video/webm
  • audio/webm
  • audio/ogg
  • video/ogg
  • application/ogg
  • video/mp4
Feature              Chrome             Firefox    Internet Explorer      Opera          Safari
Basic support3.03.5 (1.9.1)9.010.503.1
<audio>: PCM in WAVE(Yes)3.5 (1.9.1)Not supported10.503.1
<audio>: Vorbis in WebM(Yes)4.0 (2.0)Not supported10.603.1 (must be installed separately)
<audio>: Vorbis in Ogg(Yes)3.5 (1.9.1)Not supported10.503.1 (must be installed separately, e.g. XiphQT)
<audio>: MP3(Yes) (Not in Chromium)Partial (see below)9.0Not supported3.1
<audio>: MP3 in MP4





<audio>: AAC in MP4
(Yes) (Main only) (Not in Chromium)
Partial (see below)
9.0Not supported3.1
<audio>: Opus in Ogg27.015.0 (15.0)


<video>: VP8 and Vorbis in WebM6.04.0 (2.0)9.0 (must be installed separately, e.g. WebM MF)10.603.1 (must be installed separately, e.g. Perian)
<video>: VP9 and Opus in WebM29.028.0 (28.0)


<video>:  Theora and Vorbis in Ogg(Yes)3.5 (1.9.1)Not supported10.503.1 (must be installed separately, e.g. XiphQT)
<video>:  H.264 and MP3 in MP4
(Yes) (Not in Chromium)
Partial (see below)9.0Not supportedNot supported
<video>: H.264 and AAC in MP4
(Yes) (Not in Chromium)
Partial (see below)9.0Not supported3.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