Web Development Adventures: HTML5

Video
HTML5 videos are not very sophisticated in functionality
However, your page does not need any plugin to run videos

No standard currently available to run videos across browsers
MP4 is not free - there are patent/license issues
WEBM - current available alternative

<video> element
Attribute includes:

src(takes a url)
controls
autoplay
loop
poster(takes a url)
preload - includes values none, metadata, auto (default)

Audio

No standard for audio codec across browsers
MP3 is not free - there are patent/license issues
Other codecs
- Vorbis(the audio codec in the OGG container)

<audio> element
Attributes include:

src(takes a url)
controls
autoplay
loop
preload - includes values none, metadata, auto (default)

Code Snippet

Note: You will need following files placed in your project directory:

nature.mp4 of mp4 format
fan.mp3 of mp3 format

You can download and link any file available

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Video & Audio Demo</title>
    </head>
    <body>
        <p><b>HTML5 Video Demo. Click Play !</b></p>
        <video title="Mother Nature" controls poster="nature.jpg">
           <!--You can specify different formats that correspond
            to different formats supported by different browsers-->
           <source src="nature.mp4" /> 
        </video>
        <br/><br/>
        <p><b>HTML5 Audio Demo. Click Play !</b></p>
        <audio title="Mother Nature" controls>
           <source src="fan.mp3" /> 
        </audio>
    </body>
</html>

Web Development Adventures

Thursday, March 3, 2016

HTML5 - Video & Audio

Audio

Code Snippet

Output (As displayed in Chrome)

No comments:

Post a Comment