Hosting your videos on YouTube or Vimeo isn't always a perfect option. Worries over intellectual property rights (others can embed my videos), loss of traffic (visitors view my videos on YouTube instead of my site), professionalism (worries that visitors might think my site less professional if videos are embedded), and other concerns might dictate that you host your videos on your own site.
The HTML5 video tag, along with appropriate choices for video file format, makes relatively easy the process of presenting videos to be playable regardless of the viewing device.
First, let's look at the video tag:
<video width="480" height="270" controls poster="images/poster.png"> <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></source> <source type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"></source> <source type="video/ogg" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></source> <p>Your browser does not support the video tag</p> </video>
The width and height attributes set the width and height, of course; we'll also set the CSS max-width of the video element to ensure a responsive handling of width. The presence of the controls attribute dictates that the player will show controls ("play", "pause", etc.) The poster attribute is the image to show on the player before video playing starts.
The video tag encloses a series of source tags, which specify alternative video files from which the browser may choose, depending on the media types or codecs the browser supports.
In the example above, we offer browsers three options to pick from: .mp4, .webm, and .ogg versions of our video. Note that we're using open-source videos from the Video for Everybody site - we kindly appreciate their sharing.
Last, the content inside the video tag but outside the source tags is what users will see if their browser does not support the video tag.