HTML5 Video Player Best Practices

By  on  

Let's all be honest:  when it comes to media and the early days of the internet, we definitely did it all wrong.  We started with embedded video players like RealPlayer and Windows Media Player which required custom codecs and browser plugins, then moved on to Flash and Quicktime -- all of which made our browsers slow and sometimes even at risk from a security perspective.  It took more than a decade to create a <video> tag and actually get browser support for it -- far too long of a wait, so much so that many sites still use Flash to serve their videos.

All that said, the majority of the web is now using <video> and you can tell -- less browser crashes, less memory uxsed, and smoother playback.  Let's have a look at basic and more advanced <video> usage as well as some best practice tips.  We'll take advantage of Cloudinary's HTML Video Player tools and Cloudinary's awesome API for help along the way too!

Basic <video> Usage

Let's look at an example of <video> page usage and follow what's going on:

<video width="640" height="480" poster="sample-video.jpg" controls autoplay preload>
 <source src="sample-video.webm" type="video/webm">
 <source src="sample-video.ogv" type="video/ogg">
 <source src="sample-video.mp4" type="video/mp4">
 <track src="subtitles-en.vtt" kind="subtitles" srclang="en" 
        label="English" default>
 <track src="subtitles-fr.vtt" kind="subtitles" srclang="fr"
        label="French">
</video>

Most <video> elements will use the following attributes:

  • width: The width of the <video> element
  • height: The height of the <video> element
  • poster: The representative image of the video, shown while the video loads
  • controls: Whether or not the browser's native controls should be shown (in case you prefer to create your own)
  • preload: Whether or not to preload the video
  • autoplay: Whether or not to autoplay the video

Within the <video> element will typically be:

  • source: Elements that provide the source and source type of video files, ordered by preference of support
  • track: Subtitles for said video (optional, of course)

<video> Methods & Properties:

On the JavaScripts side, we have a few methods to manage the <video> element:

  • load: Reloads the video
  • play: Plays the video
  • pause: Pauses the video

And while there are many events and properties, these are the most used:

  • duration
  • paused
  • currentTime
  • volume

Using Cloudinary for <video>

Cloudinary provides a full upload to deliver API for videos.  Let's start by uploading the video with the Node.js API:

cloudinary.uploader.upload('sample-video.mp4', function(result) {
  // Callback
  console.log('result: ', result);
}, {
  public_id: 'sample-video',
  resource_type: 'video'
});

Once the video has been uploaded, Cloudinary generates WEBM, MP4, and OGV versions of your video for optimal delivery, as well as a poster image. With the video up on Cloudinary's server, you can use the following to get the video HTML:

cloudinary.video('sample-video');

/*
<video poster='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.jpg'>
    <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.webm' type='video/webm'>
    <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.mp4' type='video/mp4'>
    <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.ogv' type='video/ogg'>
</video>
*/

You can use a second argument to customize the video and poster:

cloudinary.video('sample-video', {
	width: 640,
	height: 480,
	autoplay: true,
	poster: {
		transformation: [
			{ width: 1850, crop: "scale" },
			{ overlay: "movie_curtain_overlay_new"},
			{ overlay: "text:Courier_80_bold:Once%20upon%20a%20time...", 
			gravity:"north", y: 60 },
			{ start_offset: 36 }
		]
	}
})

Cloudinary makes implementing a HTML5 video player very easily!

Best Practices and Tips

  • Be careful with the autoplay attribute -- a page mainly created for a video makes sense, but an advertisement or sidebar item?  You'll make visitors upset quickly!
  • Use a CDN -- load speed matters!
  • Offer both standard (MP4) and edge source file types (WEBM) -- you reward users who have a client with advanced compression and quality capabilities (WEBM), but provide a fallback to widely supported formats (MP4s).
  • If you create custom control elements, be sure to make them large enough that they're reasonable tap targets for mobile!

HTML5 video players started out simple but have grown quite advanced (think YouTube), and since it's all just HTML, CSS, and JavaScript, any front-end developer can create an impressive HTML5 video player.  There are probably many more people out there who've pushed HTML5 video to its limits, so please post any further tips or examples of your work!

Recent Features

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

  • By
    Get Slick with MooTools Kwicks

    When I first saw MooTools graphical navigation, I was impressed. I thought it was a very simple yet creative way of using Flash. When I right-clicked and saw that it was JavaScript, I was floored. How could they achieve such...

Discussion

  1. DJ

    David… thanks. A novice at this, I admit to being quite confused at all the changes for this and “best practices” I’ve read over the past year or so. And, I might be doing it wrong; but, I don’t do anything anymore with “fixed” dimensions. Every time I’ve done it, it breaks something somewhere.

    How can this be used when I’m not building something for some specialized, set in stone display and don’t have the luxury of ignoring the bizarre matrix of size and shapes the industry has boxed us in with? (i.e. responsive) – is it just an easy tweak?

    • Hi DJ,

      The good news is you can make s visually shrink to fit the layout space available to them the exact same way that you do this with elements:

      video { max-width: 100%; }

      The bad news is, there’s no video equivalent of the the responsive img srcset attribute, to help you load scaled-down versions of your video appropriate for the size of your viewers’ screens. However, there is a nice video (and Cloudinary!) feature which allows you to adapt the resolution and bitrate of a video in response to each user’s *connection speed* – something that can’t yet do. It’s a bit of an advanced topic, but check it out: http://cloudinary.com/documentation/video_manipulation_and_delivery#adaptive_bitrate_streaming_hls_and_mpeg_dash

  2. DJ

    Sorry Dave… I’ve been at this for years and years but only avocationally and the rate the industry has exploded these last two years has me reeling trying to keep up.

    DJ

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!