DEV Community: JW Player

Under the Hood of the Most Powerful Video JavaScript API

The JW Player Team — Fri, 01 Jun 2018 15:47:32 +0000

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:

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?

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.
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.
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.
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.
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.

JW Player is Hiring a Senior Javascript Engineer

dequaina — Fri, 06 Oct 2017 16:16:14 +0000

Senior Javascript Engineer

New York, NY

JW Player is the world's most widely-adopted web video player, generating more than 15 billion video streams a month. We're looking for a JavaScript programmer to join a world-class team of front-end software engineers dedicated to building cutting-edge features while maintaining our best-in-class performance.

In this role you will:

Write clean and reusable code using the latest web technologies
Participate in code reviews on github and with your peers
Develop expertise in JavaScript, CSS and multi-browser development
Improve performance, stability and user experience of the JW Video Player
Take ownership of feature development and releases

Requirements:

Expertise in front-end web development with JavaScript, HTML5 and CSS
Experience developing and deploying web applications
Attention to detail implementing designs and testing across browsers
Knowledge of best practices, frameworks, functional programming and OOP
B.S. degree or higher in Computer Science or related technical field

Bonus Points

Strong portfolio or Github profile
ES6/ES2015, W3C standards, CommonJS/AMD, Node.JS
Experience with DASH, HLS and/or other streaming technologies
Experience with 3rd party advertising and analytics frameworks and sdks

This is a full time role based in our NY offices.

About Us

If you've watched video on the web, you already know us. JW Player is the largest, and fastest growing, independent online video platform in the market today. We provide a popular suite of software products that enable over 2 million publishers to deliver and monetize their content on any device. Our flagship product, JW Player, is currently the most widely used video player in the world and is used in over nine billion streams each month. We recently finalized a $20 million round of series C financing to continue this upward momentum and invest in products that are changing the online video landscape.

We are an equal opportunity employer and value diversity at our company. We do not discriminate on the basis of race, religion, color, national origin, gender, sexual orientation, age, marital status, veteran status, or disability status.

Apply For This Position

JW Player is Hiring a Javascript Engineer

dequaina — Wed, 04 Oct 2017 18:45:26 +0000

Javascript Engineer

New York, NY

JW Player is the world's most widely-adopted web video player, generating more than 15 billion video streams a month. We're looking for a software engineer with top-notch JavaScript skills to join a world-class team of front-end software engineers dedicated to building cutting-edge features while maintaining our best-in-class performance. This role is on the Video Advertising Technology Team.

In this role you will:

Write clean and reusable code using the latest web technologies (JavaScript/ES6, Webpack, Node.js)
Take ownership of feature development and releases
Participate in code reviews on github and with your peers
Improve performance, stability and user experience of ad playback in the JW Video Player
Develop innovations in the video advertising ecosystem

Requirements:

3+ years commercial experience
Expertise in front-end web development with JavaScript, HTML5, CSS
Experience developing and deploying web applications
Attention to detail implementing designs and testing across browsers
Knowledge of best practices, frameworks, functional programming and OOP
B.S. degree or higher in Computer Science or related technical field

Bonus Points:

Understanding of video advertising technologies and standards (VAST, VMAP, VPAID, Google IMA)
Strong portfolio or Github profile
ES6/ES2015, W3C standards, CommonJS/AMD, Node.JS
Experience with DASH, HLS and/or other streaming technologies

This is a full time role based in our NY offices.

About Us

Apply For This Position

JW Player is Hiring a Software Engineer, Big Data

dequaina — Wed, 04 Oct 2017 18:45:17 +0000

Software Engineer, Big Data

New York, NY

Do you love to code? Want to work with big data? Then we’ve got the job for you! At JW Player, we process over 3.5 TB of data a day -- and the data is fascinating! We’ve got the viewing habits of a couple billion people across thousands of websites -- everything from silly cat videos to hard-hitting journalism.

Interested in realtime processing? Batch processing? We do both! JW Player employs cutting-edge technologies like Spark, Kafka, Flink, and Storm to deliver high-quality analytics as fast as physics will allow.

If you have experience with big data, we’d love to speak with you! But even if you don’t, we’d still love to speak with you. We’re looking for someone with a proven track record of writing high-quality code for a production environment. If you’re an excellent developer, you have a place at JW Player.

Requirements :

Strong programming fundamentals. You know your algorithms, you know OOP, you know your way around a debugger.
A proven track record writing of code for a production environment. A history of supporting that code through the full development lifecycle.
Experience with data. Doesn’t need to be big data, but your SQL should be strong and you should have a solid grasp of data modeling principles.
An obsession with testing. Experience with TDD a strong plus.
3+ years of industry experience
A degree in Computer Science or a relevant discipline

Our tech stack :

Code: Mostly Python with some Java
Real-time processing: Kafka, Flink, Storm
Batch processing: Spark, Hadoop
Storage: S3, Postgres, Redis
Cloud: All AWS, all the time!

About JW Player

If you've watched video on the web, you already know us. JW Player is a venture-funded, online video software company based in Manhattan. Our flagship product, the JW Player, is deployed on over 2 million websites and streams billions of videos each month. Started in 2008 as the world’s first open source video player, today the company’s customers span the globe across 193 countries and range from Fortune 500 companies to individual bloggers. We’re busy innovating for the future by actively hiring smart, motivated, and innovation-driven people! Come help us imagine and define what comes next! jwplayer.com/careers

Apply For This Position

JW Player is Hiring a Test Automation Engineer

dequaina — Wed, 04 Oct 2017 18:45:13 +0000

Test Automation Engineer

New York, NY

JW Player is the world's most widely-adopted web video player, generating more than 15 billion video streams a month. We’re looking for an Automation Engineer who is as excited about helping scale our functional and automation testing processes as they are about new video technologies and finding ways to test them!

In this role, you will:

Work closely with the Product and Engineering teams to define acceptance criteria and build detailed test plans
Take an active role in increasing the percentage of automated test cases by writing Cucumber feature files and contributing to our Selenium/Ruby framework
Execute hands-on functional testing on the JW Player, testing integrations across multiple platforms and configuration scenarios
Collaborate with development teams to understand how development changes affect ongoing automation efforts
Work as part of a scrum team in an agile environment

Requirements

Minimum 3-5 years relevant test automation/software development experience
Experience with HTML, JavaScript, and CSS; hands-on JavaScript coding/troubleshooting experience preferred
Experience using open source tools like Git and Jenkins
Proven automation experience with Selenium Webdriver
Skilled in analyzing feature requests/requirements, and determining potential tests that should be created
Ability to learn new technologies, tools, and processes quickly

Bonus Points

You’ve successfully implemented new testing/automation tools and processes
You’ve implemented and maintained automated visual tests using tools such as Applitools
You’ve held a developer role in the past
Comfortable multi-tasking between several projects and releases
Knowledge of video encoding, ad networks, content management platforms, and/or video streaming protocols

This is a full time role based in our NY offices.

DEV Community: JW Player

Under the Hood of the Most Powerful Video JavaScript API

Introduction

A robust, powerful video JavaScript API

How we built the web's fastest video player

Conclusion

JW Player is Hiring a Senior Javascript Engineer

Senior Javascript Engineer

In this role you will:

Requirements:

Bonus Points

About Us

Apply For This Position

JW Player is Hiring a Javascript Engineer

Javascript Engineer

In this role you will:

Requirements:

Bonus Points:

About Us

Apply For This Position

JW Player is Hiring a Software Engineer, Big Data

Software Engineer, Big Data

Requirements :

Our tech stack :

About JW Player

Apply For This Position

JW Player is Hiring a Test Automation Engineer

Test Automation Engineer

In this role, you will:

Requirements

Bonus Points

Company Description

Apply For This Position