Under the Hood of the Most Powerful Video JavaScript API

Introduction

At JW Player, we believe our technology enables developers to deliver the best video experience on their websites. From individual developers to enterprises like Vice, Business Insider, and Amazon Web Services — we have the right solution for everyone. Dev.to seems to think so as well (right-click on the video player)!

In this article, we'll prove this with code instead of lip service. The goal is to demonstrate how to leverage our player JavaScript API to deliver a better video experience on your website through code walkthroughs & demos. We'll then wrap up with some details under the hood of JW Player, explaining how we're the fastest player on the web. Without further ado:

A robust, powerful video JavaScript API

At JW Player, our mission is to provide developers with the most robust JavaScript API to allow you to take full control of your video experience. This includes functionality ranging from advanced player customization to analytics reporting.

Compared to open source solutions, we’re committed to providing robust documentation in addition to code demos alongside a dedicated, world-class support team to ensure development and implementation is a breeze. Your time is valuable and our developer & support sites ensure that you spend less time sorting through StackOverflow.

Here’s examples of what you can do:

1. Video Wall
2. 360 Degree Video & VR
3. Video Background
4. Custom Control Icons
5. Closed Captions & Caption Styling

Let's walk through the first demo - creating a click-to-play Video Wall. The purpose of this video wall is to display content in a cinematic format without slowing down your web page.

In this demo, you can set up a responsive video grid that only pulls the poster images from the videos to ensure a fast time to first frame by only loading the video player upon clicking the thumbnail. As the viewer clicks around, it pauses the original video as well.

Instead of loading several players at once, which would be painful on mobile, you can create a cinematic experience while providing the optimal UX for your viewers.

Setup and play a video with a single click on a thumbnail within a responsive image grid as seen below:

  // Request playlist data
  (function() {
    var httpRequest = new XMLHttpRequest();
    if (!httpRequest) {
      return false;
    }
    httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
          var json = JSON.parse(httpRequest.response);
          getThumbnails(json);
        } else {
          console.log(httpRequest.statusText);
        }
      }
    }
    httpRequest.open('GET', '//cdn.jwplayer.com/v2/playlists/0FDAGB12');
    httpRequest.send();
  })();

  // Render thumbnails into grid layout
  var thumbs = document.querySelectorAll('.thumb');
  var player;

  function getThumbnails(data) {
    var playlist = data.playlist;

    thumbs.forEach(function(thumb, i) {
      var video = playlist[i];
      var titleText = document.createElement('div');

      titleText.className = 'title-text';
      titleText.innerHTML = video.title;
      thumb.appendChild(titleText);
      thumb.setAttribute('id', video.mediaid + 1);
      thumb.style.backgroundImage = "url('" + video.image + "')";

      thumb.addEventListener('click', function(e) {
        handleActivePlayer(e, video);
      });
    })
  };

  // On click, destroy existing player, setup new player in target div
  function handleActivePlayer(e, video) {
    var activeDiv = e.target;
    if (player) {
      player.remove();
    }
    thumbs.forEach(function(thumb) {
      thumb.classList.remove('active');
    })
    activeDiv.classList.add('active');

    // Chain .play() onto player setup (rather than autostart: true)
    player = jwplayer(activeDiv.id).setup({
      file: '//content.jwplatform.com/manifests/' + video.mediaid + '.m3u8'
    }).play();

    // Destroy the player and replace with thumbnail
    player.on('complete', function() {
      player.remove();
      player = null;
    });
  }

How we built the web's fastest video player

When thinking about the user experience of a video player, time to first frame is the most noticeable factor that impacts the viewability of a video.

An Akamai study discovered that video abandonment rate increases by 6% for every second of load time beyond two seconds. A separate study on OTT viewership showed that buffering increases negative emotions by 16% and decreases engagement by 20%. These two studies strongly indicate that poor playback is the biggest inhibitor of video engagement.

That’s why we ensured our player has sub-second load times across all devices and browsers so end viewers never see a buffering screen.

How?

1. Our player detects the viewer’s rendering environments and loads only the necessary components required for playback. Based on a combination of the media type contained in playlists and the viewer’s browser, we’ve optimized the player to make fewer network requests for the most common use cases of video playback, reducing latency costs associated with setup times.
2. Our embed script is engineered to make fewer server requests to better interact with the overall composition of modern webpages. By implementing the latest version of our web player, you can rest assured that JW Player is actively reducing its footprint to improve your entire website experience.
3. Our video preloading fetches media data before playback and as soon as the page loads which allows viewers to enjoy faster playback with reduced bandwidth. Specifically, our backend preloading process is smarter about when it occurs and is more precise with how much is preloaded. We’ve also taken steps to optimize bandwidth consumption for websites that load multiple video players on a single page by only preloading players when they become more than 50% viewable.
4. The player is set to load metadata by default so playback starts immediately for click-to-play players once playback is initiated. To reiterate, these preloading changes allows the player to be more intelligent to avoid wasting audience bandwidth while simultaneously improving start times.
5. Finally, our player does not compromise video quality if the end viewer can support a higher quality stream. The player maintains the viewer’s bandwidth between videos, allowing the second and subsequent videos to benefit from a higher quality start at the beginning. If the viewer is watching the player embed’s first video, the player can start up at the last known bandwidth when a viewer returns to a site on the same device and browser.

To see what’s going on under the hood, check out the player event inspector on our developer website. Here, you can test and debug a JW Player setup with our return of all available JW Player events, getters, and utils.

For more info, you can also check our comprehensive configuration reference documentation.

Conclusion

We created the most powerful, flexible video Javascript API so you can deliver a great video experience customized to your standards. Our team maintains the player to ensure full device and browser support so you're always up to date — plus tools, demos and robust API documentation so you can focus on what matters.

For more information, compare options and see which plan is right for you.