I was recently asked to add a film trailer to an existing website and looked around for tools that would provide a cross-browser solution. I found an actively supported open-source player at videojs.com and started to test it.

Looked good at first, but then usability issues cropped up. I wanted play/pause triggered with the space bar, no control bar at start, and at the end the movie should spool back to the beginning. I solved most of this except for the space bar, but what really bothered me with the videojs project is the way features were changed, dropped, and re-added by contributors without notice, keeping you hopping about between the rapidly incrementing versions to get a working feature set.

Isn’t there a simpler way? Turns out there is.

The solution:

Don’t include third-party code. Just use the simple <video> tag.

<video id="oceans" controls preload="auto" width="582" height="242" poster="http://bitpals.com/en/wp-content/uploads/2014/11/oceans.jpg">
  <source type="video/mp4" src="http://vjs.zencdn.net/v/oceans.mp4"></source>
  <source type="video/webm" src="http://vjs.zencdn.net/v/oceans.webm"></source>
</video>

And voilà:

Since the player now has focus during play, the space bar can handle play/pause.

This works on all current browsers including IE9. Older versions of IE need extra help with HTML5 features. One promising solution (I haven’t tested it) is the Video For Everybody Generator  that spits out cross-browser code for your video. See Crossbrowser-safe HTML5 video for more on this.

There are some differences in browser support of course. Firefox (yay!) shows a big play button and keeps the focus on the video when clicked. Chrome does not offer this. I believe it is better to let the browsers sort it out for themselves and let the user decide according to their preferences. This makes it easier for the developers, which is a good thing.

Update!

An additional JavaScript snippet enables the space bar on all browsers, even Chrome. Thanks to Jan-Sören Wiemers at Xing for the Tip!

We still need a couple of tweaks to hide the controls when the film is loaded, and to loop back to the beginning when the film is over. The space bar snippet is also included.

Small tweaks:

Manipulating media events is done through the — you guessed it — HTML5 Media API. This script reloads the movie when it’s over and enables the space bar:

<script type="text/javascript">
  (function(){
    // reload video at end
    var video = document.getElementsByTagName('video')[0];
    video.addEventListener('ended', function() {
      video.load();
    });
    // enable play/pause with space bar
    window.addEventListener('keydown', function(event) {
      if(event.keyCode === 32) {
        if(video.paused) {
          video.play();
        }
        else {
          video.pause();
        }
        event.preventDefault();
      }
    });
  })()
</script>

We need event.preventDefault() here to prevent the space bar’s keydown event from being passed on after the handler. Without this the page jumps up and down.

To hide the control bar on start we only have the option of removing the controls property from the video tag. This is because the controls property includes all input elements on the video canvas. But this would also remove the big play button, leaving no way to start playing the movie. So we’ll leave this as is for now, hoping that W3C and web authors will continue work in finetuning the API (although the HTML5 Media API is already finalized at the RFC stage at W3C).

---

Video clip from Disney Nature’s Oceans via Videojs.com. Trademarks and copyrights are with their respective owners.