Auto Reload and Live Stream Splash for FV Player on Wordpress

[syntax]

Couldn't find this on the web... make a script.js and put this in it:

Code: Select all

window.onload = function () {
 
	var fvcol = document.getElementsByClassName("flowplayer is-live");
  
	if (fvcol.length) {
		
		var container = fvcol[0];
		var timer;
	 
		player = flowplayer(container, {
			//
		}).on("load", function (e, api, video) {
		
			clearInterval(timer);
		
		}).on("error", function (e, api, err) {
			var delay = 30,
				header = container.querySelector(".fp-message h2"),
				detail = container.querySelector(".fp-message p");
		 
			if (err.code === 4 || err.code === 9) {
			  header.innerHTML = 'Live stream is not broadcasting.<br><span class="subtext">(unable to connect)</span>';
			  detail.innerHTML = 'Retrying in <span>' + delay + '</span> seconds ...';
		 
			  if (flowplayer.support.flashVideo) {
				api.one("flashdisabled", function () {
				  container.querySelector(".fp-flash-disabled").style.display = "none";
				});
			  }
		 
			  timer = setInterval(function () {
				delay -= 1;
				if (delay < 0) { delay = 0; }
				detail.querySelector("span").innerHTML = delay;
		 
				if (!delay) {
				  //clearInterval(timer);
				  //api.error = api.loading = false;
				  //container.className = container.className.replace(/ *is-error */, "");
				  //api.load(api.conf.clip);
				  window.location.reload();
				}
		 
			  }, 1000);
			} else {
				//alert(err.code);
			}
			
		}).on("hlsError", function (e, api, data) {
			// communicate hlsjs specific error handling
			// our dummy mnanifest has bogus levels
			// make hls.js levelLoadError fatal
			if (data.details === "levelLoadError") {
			  var videoInfo = api.video;
		 
			  videoInfo.url = data.url;
			  // trigger core player error event
			  // error code 4 for network error
			  api.trigger("error", [api, {code: 4, video: videoInfo}]);
			}
		 
		});
		
		if (player.error == true) {
			var videoInfo = player.video;
			player.trigger("error", [player, {code: 4, video: videoInfo}]);
		}
	}
};

and then load it with the following in your theme:

Code: Select all

wp_enqueue_script( "unique_handle_name", get_template_directory_uri(). "/path/to/script.js" );

css styles--

Code: Select all

.flowplayer.is-error .fp-message {
  background-image: url(/streaming/media/sites/streaming/2016/04/interruption2.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.flowplayer.is-error .fp-message h2,
.flowplayer.is-error .fp-message p {
  font-weight: bold;
  color: #000;
  text-shadow: 1px 1px #fff
}
.flowplayer.is-error .fp-message h2 {
  font-size: 200%;
}
.flowplayer.is-error .fp-message p {
  font-size: 150%;
}
.flowplayer.is-error span.subtext {
	font-size:75%;
	font-style:italic;
}