Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WDS20 - HTML Videos and Merry Christmas

In the last article we learned;
  • element
  • element
which completed our discussion about forms in Html.
Now we have completed many things in HTML. We have also seen how to add images to HTML, but definitely there are more ways to enhance our web pages. Let's see how we can add media elements to our pages for more engagement of users and create more informative web pages...

HTML5 Video

HTML5 element specifies a standard way to embed a video in a webpage. Although video could be embedded before HTML5, it was only using the plug-in like flash. Let's see how to use element:
Following attributes are used in tag:
  • width and height : To describe width and height of the video
  • controls : This adds video controls like play, pause, and volume.
  • autoplay : To start video automatically
Inside and tags, we will add source text describing the source of video with following attributes:
  • src : Video name with address
  • type : video/mp4 or video/webm or video/ogg 
I am not showing here live code example in jsfiddle as I could not find way to upload a video to show in jsfiddle( If you know, please tell me...), but here I am writing complete code...

    Sorry! Video not playable for you.

We will see the more efficient way to add youtube videos later. 
That's all for today. I am keeping this article short just because of Christmas so you can enjoy more. In the next article, we will see some other elements related to media in HTML. Till the #keepCoding and Merry Christmas

This post first appeared on The Coding Express, please read the originial post: here

Share the post

WDS20 - HTML Videos and Merry Christmas


Subscribe to The Coding Express

Get updates delivered right to your inbox!

Thank you for your subscription