Subscribe to Our Newsletter

x

Integrating JW Player on RebelMouse

JW Player is a very popular video CMS that provides transcoding, encoding, and a sophisticated player that can be connected to DoubleClick for Publishers (DFP) and other ad-targeting systems. RebelMouse has a deep integration with the platform for our clients that have their own JW Player license.


The integration allows editors to upload from our creation tool directly into JW Player, as well as the ability to choose different players that you have already configured according to context and workflow.

In addition, we have a search interface in our content creation tool that allows you to easily search across your own library and build articles based on your video library.

You are able to upload your videos easily from the entry editor:

Browse your video library to select which video you want to embed in your RebelMouse article:

You can also edit the description of your video:

We support JW Player in lead media spots, and we support this for Google Accelerated Mobile Pages (AMP) as well. You can embed JW Player in a post's body and/or create slideshows, listicles, or amazing playlists.

Types of Integration

  • Lead media
  • Particle media
  • Media in the body of a post
  • Playlists
  • Home pages
  • Section pages
  • Tag pages

Lead Media Integration

There are two ways to integrate JW Player into your lead media. In both cases, it requires a custom JavaScript code to activate the player.

The first option is to use our post thumbnail instead of loading JW Player. This is the best option for page speed because we render an image that on click loads the embeds, avoiding the payloads of a full embed. Keep in mind that for this scenario the player itself should have autoplay turned on. This way, when we replace the thumbnail with a player, it will start playing right away.

It's important to note that if a user updates a video thumbnail in their JW Player dashboard, they will also need to update it in our Entry Editor before it will be shown on the site - we cache these for speed.

The second way is to load a video embed. In this case, the player shouldn't have autoplay enabled. The compromise here is that RebelMouse will need to rely on JW Player to render a proper thumbnail ratio, especially for smaller teasers. There could also be some slowdowns if you have 10+ video teasers located on one page.

Particle Media

For videos located in our Particle Assembler, we load all of the needed initializations from the server's side, which means the player will be initialized right away.

Playlists

This is a special type of rendering using our Particles feature. It uses our thumbnails, and it requires a hardcoded site section in a Runner template to render it. It also requires additional custom JavaScript to make the playlist logic functional.

Playlist format: Here's an example of a working playlist that can be rendered on a section or article page. We are currently working on turning this into a simple element you can style but contact us to set up a playlist layout for you. Editorially you choose the Playlists layout to enable this.

Playlist format: Here's an example of a working playlist that can be rendered on a section or article page.

Useful Custom JavaScript Code

Useful JWPlayer Code Samples You Can Plug Into the design tool:

https://stackoverflow.com/questions/46105319/jw-player-stop-target-multiple-players-with-an-event-handler

https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_introduction/

Assembler code for the JWPlayer should look like this.

Here is an example for handling the Play button through custom JavaScript:


function VideoPlayerLoader() {


if (widgetsHead.length) {

widgetsHead.forEach(function(widgetHead) {

let video = widgetHead.querySelector('.widget__video');

let image = widgetHead.querySelector('.widget__image');

if (video) {

const regex = /players\%2F([\w\-])+\.js/g;

const script = video.querySelector('script[type="video-content"]');

let str = '';

if (script) {

str = script.innerText;

}

console.log('not null === ', str);

if(str.length) {

str = regex.exec(str);

if (str !== null) {

let videoPlayer = str[0].replace(/players\%2F/g, '').replace('.js', '').split('-');

let videoWrapper = document.createElement('div');

let videoPlayerScript = document.createElement('script');

if (location.pathname === '/') {

videoPlayer[1] = '{{$YOUR-PLAYER-ID}}';

}

videoWrapper.id = 'botr_' + videoPlayer.join('_') + '_div';

videoPlayerScript.src = ' https://content.jwplatform.com/players/' + videoPlayer.join('-') + '.js'

image.onclick = function () {

image.className += " hidden";

video.style.display = "block";

video.appendChild(videoWrapper);

video.appendChild(videoPlayerScript);

};

} else { //copy from ui-basics to cover the rest of videos

if (script) {

image.onclick = function () {

video.innerHTML = script.innerHTML;

image.className += " hidden";

video.style.display = "block";

}

}

}

}

}

});

}

}


document.addEventListener("DOMContentLoaded", function (event) {

VideoPlayerLoader();

});

{{require}}(['jquery', 'core/event_dispatcher'], function ($, eventDispatcher) {

eventDispatcher.on('load-more:sync', function() {

VideoPlayerLoader();

});



});

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

Easily Snap RebelMouse Into Slack

RebelMouse offers a Slack integration that allows you to sync your editorial process with Slack's notifications. We can set up three events that trigger notifications:

  • Changed stages in the editorial process
  • Edited a post
  • Published a post
Keep reading... Show less

A Seamless Transition: Introducing RebelMouse to New Team Members

Behind every site powered by RebelMouse, there's a team of dedicated content creators, storytellers, developers, and leaders who are working to make sure their site is growing and flourishing. Sometimes, these teams fluctuate as new members join and others leave.

Keep reading... Show less

How to Use Variables to Set Colors Across Your Site

Why This Is Important

You can easily set colors for every element of your site on RebelMouse, including the color of your text, links, and headlines. Usually there's a set of 2–3 colors used across a site. But instead of hardcoding the color on every element, you can use variables to make it so that if a color needs to change, you can update it in one place instead of everywhere — making future maintenance easy.

Keep reading... Show less

Learn More About RebelMouse’s High-Performing Infrastructure

To ensure every site powered by RebelMouse is high performing, secure, and optimized for user experience, we only use the best and most reliable methods to host our infrastructure. Here's a detailed look at some of the services and security measures we use every day to secure maximum stability and security for each of our sites.

Click here to learn more about what makes RebelMouse secure, stable, redundant, and high performing.

Services

Stateless services, such as application services for front end and back end tasks, are deployed within an Amazon Virtual Private Cloud (VPC) into multiple availability zones using Amazon Auto Scaling groups. Every service deployment is automated and can be done without an operator. Auto Scaling groups eliminate the need for manual recovery procedures in the event of hardware-related incidents. Additionally, Auto Scaling groups for stateless services provide the ability to balance resources according to current load.

Stateless services include:

  • Front end and back end applications
  • Background workers
  • Dedicated services for paid content and statistics

All interactions with our internal services are done via Amazon Elastic Load Balancing (ELB). Load balancing allow us to control the flow of all incoming traffic and reroute it to the group of instances that are available as necessary, which covers any networking and hardware issues. Every load balancer controls the health of the listener instance by regularly performing health checks and removing failed instances from production environments.

Load balancing and Elastic Compute Cloud (EC2) instances provide monitoring services with resource consumption data. Stateful services such as MongoDB, Redis, and Memcached are deployed within a VPC into multiple availability zones using Auto Scaling groups. Every data service has backup, recovery, and automatic failover procedures. Backup and recovery procedures are integrated into Auto Scaling groups and tested regularly.

Services performance is monitored by internal and external tools:

  • Sentry is used to track errors.
  • New Relic is used for application performance monitoring.
  • Amazon CloudWatch is used to monitor performance extremes.
  • Monit, Nagios, and Cacti are used to monitor metrics per instance.

Security

Defense in Depth (DiD) standards are adhered to and applied at all levels:

  • Amazon Web Services (AWS), such as Identity and Access Management (IAM), and CloudTrail
  • VPC and subnets
  • Load balancers (security groups)
  • EC2 instances
  • Operating systems use permissions-based controls

Access Monitoring:

  • AWS CloudTrail monitors all activities in our production data centers and grants us the ability to perform audits

Data Protection:

  • Secured storage
  • Encrypted transition protocols
If you have any questions about RebelMouse's technical infrastructure, email support@rebelmouse.com.

Stepped Entry Editor: Guide Your Users Through Content Creation

Small, dedicated teams can create quality content that helps your site grow traffic organically. RebelMouse's platform enables multiple communities with granular permissions and simplified contribution tools to create a collaborative workflow built for creators.

Keep reading... Show less

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

How to Fix: Invalid Twitter Card

Sometimes when you share a RebelMouse article to Twitter, it will render the tweet without a Card:

Keep reading... Show less

How to Fix: Facebook Image Sharing Error

Sometimes when you share images on Facebook that are in the body of the post, the following error will occur:

"Can't load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings."

Keep reading... Show less

When to Use the Post Content Element’s Lead Media Properties

RebelMouse's Layout & Design tool makes designing your site easy and intuitive. But there are certain design factors you need to take into account when building out your site.

When creating a post page (i.e., the landing page for any article that a user is directed or navigates to), styling it is slightly different from other pages because it requires you to use the Lead Media property of a Post Content element. Within the context of our Layout & Design tool, "Lead Media" is defined as the main post tied to a post page's URL, which includes all of its images, media, and text.

By contrast, the Posts element displays all other articles (or posts) that aren't the main post you land on. These are the subsequent posts on a page that appear afterward as you scroll — such as in an infinite scroll setup, for example.
Keep reading... Show less

Cross-Site Shareable Elements on RebelMouse

We now have a new feature that will be very helpful for clients that have multiple sites and/or a site network powered by RebelMouse: Cross-Site Shareable Elements. This new feature makes styling work much easier since users are able to update several site layouts at once by editing a single element. This should also prevent duplicating code in similar site layouts, as well as saving users some coding time.

Keep reading... Show less

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x
Subscribe to Our Newsletter

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x