Video tag html5 example

Adding a video to any webpage is single element using html5 video tag, as easy as adding an image. You don’t need to write any complicated markup for plug-ins.

Earlier we could add video in our webpage using object tag, specially embedding youtube video in html page apart from using iframe (may people avoid iframe due to seo disadvantage).

<object data='https://www.youtube.com/embed/PS-emASu6sA?autoplay=1' width='560px' height='315px'></object>

in the video url we could send all parameter value like autoplay, loop etc., now in html5 tag we have each of those parameters as html tag attributes.

HTML5 Video Tag Example

Adding Single Video, you can set video autoplay property

<video autoplay="autoplay" src="~/sound/dance.mp4" controls="controls">
</video>

Adding Multiple Videos, setting video autoplay and loop property

<video width="320" height="240" autoplay="autoplay"  controls="controls" loop="loop">
<source src="~/sound/dance.mp4">
<source src="~/sound/dance2.mp4">  
</video>
video tag attributes

Here are few important attributes for video

  • src

    this property is for setting up the file source, like source src="~/suound/file1.mp3"

  • autoplay

    autoplay="autoplay", This Boolean attribute specifies that if the video will automatically start playing, the value is "autoplay" which means "true".

  • controls

    controls="controls", Indicates browsers will display the control, that will allow the user to control video play/pause, volume etc.

  • loop

    loop="loop", Indicates that video will automatically start over again

  • muted

    muted="muted", if the property value set to muted then, then the audio will be muted when loaded for the first time

<video autoplay="autoplay" controls="controls" loop="loop">
    <source src="https://www.youtube.com/embed/PS-emASu6sA" />            
</video>

Implementing video in HTML is as simple as image, is just one element in Html5

You may be interested in reading following articles:
HTML5 Tags Examples | Join Web Design Course