Embedding a video
HTML5 isn’t just flexible, but also easier for developers to implement. You can place a video on your webpage by using a simple tag. Take a look at the following example of implementation:
poster="examples/sanfran.jpg" source="examples/sanfran.m4v">
</video>
The above code will make the video appear like as shown in the following screenshot:
Let’s take a look at the attributes we’ve used in the code.
width and height
You can set the size of the video directly in the tag itself using these attributes. The width and height attributes overrides the size of the original video.
controls
Though this attribute is not used in the above piece of code, I felt the need to take about it. This attribute allows you show/hide the native controls of the vide like play and pause. The controls are shown by default. If you wish to hide them, you can use this attribute.
autoplay
This attribute sets your video to start playing as soon as the source is ready. It
defaults to ‘Off’ . I suggest you to not use this parameter on your website’s home page as it annoy your visitors.
poster
This attribute is used to show an image as a video thumbnail. If you don’t use this attribute in the <video> tag, the first frame of the video is shown as a video thumbnail once the frame is loaded.
source
This attribute is used to specify the source of the video you want to play on the webpage.
There are other attributes that can be used while using HTML5 <video> tag. Let’s take a look at them too:
autobuffer
This is like autoplay attribute we have discussed earlier about. This doesn’t start playing video when set to ‘On’, instead starts buffering the video when loaded on to the web page. By default this would be set to ‘Off’.
loop
This attributes works as it sounds. The video will be keep on playing when set to ‘On’. By default this is also set to ‘Off’.
download
If the video is playing on the device for some reason, you can allow user to download the video at least by using download attribute.
Hope you have learnt how to embed a video using HTML5 <video> tag. Comment below if you have any doubts regarding this!
Post a Comment