JWPlayer Cusomisation

You can do a lot of cusomisation with JWPlayer via CSS skinning with V7, but it has it’s limitations…

Sometimes you need to show an image on a hosted JWPlayer.. It is especially important for mobile devices, as autoplay is disabled on phones, so an image is great feature to have:

<script>
function setupPlayer(container,jwFeedUrl, cameraImage) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", jwFeedUrl, true);
  xhttp.send();
  xhttp.onreadystatechange = function () {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
   var list = JSON.parse(xhttp.responseText).playlist;
   list[0].image = cameraImage;
   var playerone = jwplayer(container);
   playerone.setup({
    playlist: list,
     mute: 'true',
     autostart: 'true'
   });
  } else if (xhttp.readyState == 4 && xhttp.status == 404) {
     Console.log("Error loading player " + jwFeedUrl);
    }
 };
}

setupPlayer("myDivId","https://content.jwplatform.com/feeds/x12U4l67.json","http://assets.rangerrom.com/portrait/rangerrom.png");

</script>

JWPlayer Setup Timeout Issues

If you ever see get a Setup Timout error from JWPlayer. A useful workaround if you do not have time to optimise the website asset pipeline is to load the JWPlayer only once the html document is ready.

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

or with JQuery

$(function() {
  setupPlayer(...);
});

• Uncategorized