Using The HTML < video > Element To Play Videos In Your Website

Octavian -

We’ve come a long way since Flash was the de facto plugin for reliably playing videos across browsers.

Today it’s as easy as adding 3 lines of HTML code:

<video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4"> </video>

The <video> element is now the standard way of embedding videos in web pages today. It’s been supported by all modern browsers for some time now and packs quite a punch.

You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

Here’s a more complex example:

<video controls controlsList="nodownload" width="640" height="480" poster="initialimage.png" muted> 
    <source src="videofile.mp4" type="video/mp4"> 
    <!-- fallback for browsers that don't support video tag --> 
    <a href="videofile.mp4">download video</a> 
</video>

The above video player:

  • shows a preview image
  • plays a 640×480 video that’s muted by default
  • hides the download button
  • has a video link as fallback for very old browsers

Feel free to copy, paste and adapt the code to your needs.

But the video players built in today’s browsers pack even more features:

  • Display or hide the video controls, including play/pause, volume, full-screen toggle, and seek slider using the controls attribute.
  • Hide the (new) download, fullscreen or remote playback buttons using the controlList attribute (Chrome 58 only, code sample)
  • Set a poster image to display while the video is downloading or not playing using the poster attribute.
  • Provide a list of videos in different formats, so that each browser can play the format it supports using multiple <source> elements.
  • Include closed-caption subtitles or captions in multiple languages using the <track> element and WebVVT subtitles.
  • Tell the browser whether to start downloading the video when the page loads or only when the user presses Play using the preload attribute.
  • Auto play the video as soon as it’s ready using the autoplay attribute
  • Play the video once or in a loop using the loop attribute.
  • Indicate if you’d like to play the video without sound (muted) using the muted attribute. For example, automated videos on Facebook display the mute option overlayed on the video.
  • Specify the point in the video where playback should start by appending #t=20 to the video’s URI (Media Fragments URI, sample)
  • The the playbackRate and defaultPlaybackRate attributes, accessible via the DOM, allow us to control the playback speed of the video
  • Specify the video should play inline in Safari on iOS 10+ using the new playsinline attribute

Powerful as they might be some things are not covered. For showing ads, using playlists and analytics you should consider commercial solutions like JW Media Player, Flow Player and Cloudinary or the open source video.js. Cloudinary also has a HTML5 video player comparison with many other solutions listed.