Building The Insights Video Experience

For this year's annual JW Insights Conference, we decided to try something new. Our live streaming and post-event experiences needed to be engaging, intuitive, and elegant. Here's how we built the live streaming experience and post-event player for JW Insights 2016.

How JW Player does Video Player Testing with QA Automation Tools

The major challenge with automated integration testing for a web player via browser automation tools is that these tools better serve the purposes of web applications such as e-commerce sites, single page applications, and social networks. How do you take a product like JW Player which is embedded on over 2 million websites where publishers are always coming up with unique ways to use the player, and build an automated testing framework that will ensure the quality of that player? I would like to walk through how we’ve taken on that challenge.

CSS <3 JW7 – A Skinning Introduction

In this article, we'll explore the basics behind CSS and why JW Player chose CSS for its new skinning model. In addition, we'll also explore some interesting modifications that can be done to the player's skins. CSS ♥ JW7

Implementing FCC Closed Captioning Requirements

As of January 1, 2014 the FCC requires programs on live US television to include closed captioning when they are re-shown on the Internet. Additional requirements include a set of enhancements to make captions more accessible to a variety of needs. The FCC has adopted these requirements based off of provisions in the Twenty-First Century Communications and Video Accessibility Act of 2010 (CVAA). This Act is a giant step forward in updating laws passed during the 80's and 90's to fit with modern technologies. captions

Call to Action with JW Player

Adding calls to action (CTAs) to your videos is one of the most effective ways to convert leads. Viewers are much more likely to take the next step when you direct them toward an action at the perfect moment within your video than if your video simply plays with no button urging "click here". Common CTAs are signing up for a free trial, contacting a sales rep, or linking to more resources. Let us know if you have other great ideas! Although creating clickable calls to action isn’t an out-of-the box feature of JW Player, it is possible to achieve this with some JavaScript and our JavaScript API.

How to do it

All you need to do here is set up a normal JW Player embed like we always do, and use our API, and onComplete(), to tell the player to display the call to action at the end. This demo shows a movie preview with a CTA to watch the entire film when the preview is over:

Age Verification with JW Player

As long as our player has been around, we have received requests from our customers asking for the ability to age gate their users. This feature presents users with an age verification prompt requiring them to enter their birthday. If the users are older than the required age, they are granted access to watch the video (i.e. video playback starts). If they are younger than the required age, they are taken to a different page and are unable to view the video. It is a simple, but useful feature to restrict underage viewers from mature content.

Although this isn’t an out-of-the box point & click feature in the JW Player, it is possible to achieve this feature with some JavaScipt, an iFrame, and our JavaScript API.

Encoding HLS with Amazon Elastic Transcoder

HLS is a powerful streaming protocol that Apple introduced in order to allow for live streaming on iOS devices. JW Player introduced HLS support in Flash too.

If you are looking to encode only a couple of videos, you could consider converting all videos manually, but if you have a larger library, it is important to replace any manual steps with a good encoding pipeline. Amazon’s Elastic transcoder has all the important components you need to create a transcoding pipeline using Amazon’s API’s.

Slow Motion with JW Player

As long as our player has been around, we have received requests from our customers asking to slow down video playback. Unfortunately, Flash never exposed any sort of playback speed control across the board. Take a video with progressive download -- by default controlling playback speed is not supported. The only way for this to work is by using RTMP, with either Adobe Flash Media server or Wowza Media Server (FLV only).

As a support team, we would get around this by using the player API to mute the audio track and essentially make the play pause very quickly, over and over again, using a timer, to simulate the illusion of slow motion, however, this solution was not very elegant, and it made the play icon flicker.

Building Tooltip Thumbnails with Encoding.com

A great new feature in JW Player is the popup of quick preview images when mousing over the timeSlider. This allows viewers to seek to a particular position, or to quickly scan the contents of a video. We call these previews Tooltip Thumbnails. Start this video and rollover the controlbar for a live example: