Before HTML 5 came into existence, videos could only be played in a browser using a plug in like flash. But after the release of HTML 5, adding a video to a webpage is as easy as adding an image. The HTML5 “video” element specifies a standard way to embed a video in a web page.
The table below specifies the first version of each web browser that fully supported the “video” tag :
There are three different formats that are commonly supported by web browsers – mp4, ogg and WebM. The table below lists the formats supported by different browsers :
Syntax :
Attributes that can be used with the “video” tag are listed below :
- Autoplay : It tells the browser to immediately start downloading the video and play it as soon as it can.
- Preload : It intends to provide a hint to the browser about what the author thinks will lead to the best user experience.
- Loop : It tells the browser to automatically loop the video.
- height & width : It sets the width and height of the video in CSS pixels.
- Controls : It shows the default video controls like play, pause, volume etc.
- Muted : It mutes the audio from the video.
- Poster : It loads an image to preview before the loading of the video.
Adding Video using HTML5 :
<!DOCTYPE html> < html > < body > < p >Adding Video on my webpage< p > < video width = "400" height = "350" controls> < source src = "myvid.mp4" type = "video/mp4" > < source src = "myvid.ogg" type = "video/ogg" > </ video > </ body > </ html > |
Output :
Code Explanation :
- Controls attribute is used to add controls like play, pause, volume etc.
- The “source” element is used to specify the video that the browser will
choose to play.
Autoplaying a Video using HTML5 :
To start a video automatically use the autoplay attribute.
<!DOCTYPE html> < html > < body > < p >Adding Video on my webpage< p > < video width = "400" height = "350" autoplay> < source src = "myvid.mp4" type = "video/mp4" > < source src = "myvid.ogg" type = "video/ogg" > </ video > </ body > </ html > |
Output :
HTML Video using JavaScript :
Many properties and events can be set for a video like load, play and pause videos, as well as setting duration and volume.
<!DOCTYPE html> < html > < body > < div style = "text-align:center" > < button onclick = "Pauseplay()" >Pause/Play</ button > < button onclick = "Big()" >Big</ button > < button onclick = "Small()" >Small</ button > < button onclick = "Normal()" >Normal</ button > < br >< br > < video id = "myvideo" width = "450" > < source src = "myvid.MP4" type = "video/mp4" > < source src = "myvid.ogg" type = "video/ogg" > </ video > </ div > < script > var testvideo = document.getElementById("myvideo"); function Pauseplay() { if (testvideo.paused) testvideo.play(); else testvideo.pause(); } function Big() { testvideo.width = 600; } function Small() { testvideo.width = 300; } function Normal() { testvideo.width = 450; } </ script > </ body > </ html > </ body > </ html > |
Output :
leave a comment
0 Comments