This is a small example for use with the JW Player. It allows visitors of the website to select which rendering mode they want to view the player in - Flash or HTML5. It adds a dock button to the player with this toggle. The choice is saved as a cookie.
You need the following script above your JW Player embed instance:
var primary = 'html5';
var thecookies = document.cookie.split(";");
for (i=0; i < thecookies.length;i++){
var x = thecookies[i].substr(0,thecookies[i].indexOf("="));
var y = thecookies[i].substr(thecookies[i].indexOf("=")+1);
x = x.replace(/^\s+|\s+$/g,"");
if (x == 'primary') {
primary = y;
}
}
Then, embed the player. One note here is that you must set the player's primary option to the variable we created in the first step (called primary), as that is what the script is looking for whe then toggle button is pressed:
jwplayer("player").setup({
file: 'http://content.bitsontherun.com/videos/bkaovAYt-injeKYZS.mp4',
image: 'http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg',
title: 'Big Buck Bunny',
primary: primary
});
Then, after your JW Player embed instace, this is needed as well:
jwplayer().onReady(function(){
if(jwplayer().getRenderingMode() == "flash"){
this.addButton("html5.png", "Switch to HTML5", switchIt, "button1");
} else {
this.addButton("flash.png", "Switch to Flash", switchIt, "button1");
}
});
function switchIt(){
primary == 'html5' ? primary = 'flash': primary = 'html5';
document.cookie = "primary=" + primary;
window.location.reload();
};
There are two png files that are needed that have to reside on your web server, html5.png, and flash.png. Please make sure to upload them and reference them in your script accordingly.
<!DOCTYPE html>
<html>
<head>
<title>Toggle</title>
<script type="text/javascript" src="http://p.jwpcdn.com/6/8/jwplayer.js"></script>
</head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
<body>
<div id="player"></div>
<script type="text/javascript">
var primary = 'html5';
var thecookies = document.cookie.split(";");
for (i=0; i < thecookies.length;i++){
var x = thecookies[i].substr(0,thecookies[i].indexOf("="));
var y = thecookies[i].substr(thecookies[i].indexOf("=")+1);
x = x.replace(/^\s+|\s+$/g,"");
if (x == 'primary') {
primary = y;
}
}
jwplayer("player").setup({
file: 'http://content.bitsontherun.com/videos/bkaovAYt-injeKYZS.mp4',
image: 'http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg',
title: 'Big Buck Bunny',
primary: primary
});
jwplayer().onReady(function(){
if(jwplayer().getRenderingMode() == "flash"){
this.addButton("html5.png", "Switch to HTML5", switchIt, "button1");
} else {
this.addButton("flash.png", "Switch to Flash", switchIt, "button1");
}
});
function switchIt(){
primary == 'html5' ? primary = 'flash': primary = 'html5';
document.cookie = "primary=" + primary;
window.location.reload();
};
</script>
</body>
</html>
The source code is available for this example. There is just a .html file. Publishing the html can be simply done with any text editor. Enjoy~! :)