So there have been a few youtube player controls out there, however I recently had a client that was after more. They wanted to create custom youtube player controls that allowed them to hide the actual youtube player controls and post their own. Their ultimate goal was to have a way to create spoiler free videos for online games. However this could be applied to other sports that end when a certain amount of points are hit. Or even just those wanted to create a more stylized version of the youtube player controls.
So to start the client was using wordpress and already paid for a custom wordpress plugin that allowed them to pull an entire playlist and it automatically created large thumbnails for the user to display. https://wordpress.org/plugins/yourchannel/
Now to start we need to use the youtube api to initialize the player which would normally be
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(‘player’, {
height: ‘390’,
width: ‘640’,
videoId: ‘M7lc1UVf-VE’,
events: {
‘onReady’: onPlayerReady,
‘onStateChange’: onPlayerStateChange
}
});
}
However the player already does that so we need to initialize it with their code.
function init_everything(){
YRC.EM.on(‘yrc.player_state_change’, function(e, d){
// d is an array with 2 elements, first one is YourChannel-specific info, second one the player event
if(d[1].data === -1){
// player is ready, show your custom controls
}
});
}if(window.YRC.EM) {
init_everything();
} else {
var yrctimer1 = setInterval(function(){
if(window.YRC.EM){
init_everything();
clearInterval(yrctimer1);
}
}, 100);
}
We dont want the controls to always show so lets have them hide until we actually click on the video area.
jQuery(‘.yrc-shell-cover’).click(function() {
jQuery(‘.utubeplaycontrols’).show();
});
So now we have the player initialized and we need to start creating all the buttons the client wants. He wanted some special ones too. The First is going to be a drop down for video quality.
<select name=’numbers’ id=’quality’ >
<option value=’1′>1080P</option>
<option value=’2′>720P</option>
<option value=’3′>480P</option>
<option value=’4′>360P</option>
<option value=’5′>240P</option>
<option value=’6′ selected=’selected’>AUTO</option>
</select>
The reason we are using the value string is so we can easily hook the functions to them. This allows us to create our own lables for the youtube videos as the api uses rather odd wordings for video quality.
jQuery(‘#quality’).change(function(){
if(jQuery(this).val() == 1){
YRC.Setups[0].player.player.pauseVideo();
YRC.Setups[0].player.player.setPlaybackQuality(‘hd1080’);
YRC.Setups[0].player.player.playVideo();
}
if(jQuery(this).val() == 2){
YRC.Setups[0].player.player.pauseVideo();
YRC.Setups[0].player.player.setPlaybackQuality(‘hd720’);
YRC.Setups[0].player.player.playVideo();this
}
if(jQuery(this).val() == 3){
YRC.Setups[0].player.player.pauseVideo();
YRC.Setups[0].player.player.setPlaybackQuality(‘large’);
YRC.Setups[0].player.player.playVideo();this
}
if(jQuery(this).val() == 4){
YRC.Setups[0].player.player.pauseVideo();
YRC.Setups[0].player.player.setPlaybackQuality(‘medium’);
YRC.Setups[0].player.player.playVideo();this
}
if(jQuery(this).val() == 5){
YRC.Setups[0].player.player.pauseVideo();
YRC.Setups[0].player.player.setPlaybackQuality(‘small’);
YRC.Setups[0].player.player.playVideo();this
}
if(jQuery(this).val() == 6){
YRC.Setups[0].player.player.pauseVideo();
YRC.Setups[0].player.player.setPlaybackQuality(‘default’);
YRC.Setups[0].player.player.playVideo();this
}
});
Next we are going to start by creating our own mute and unmute buttons. These will be set that you can click one image to mute it, then click another to unmute it.
<span id=”mute-mute”><img src=”unmute.jpg” alt=”mute” /></span>
<span id=”mute-unmute” style=”display: none;”><img src=”mute.jpg” alt=”unmute” /></span>
We have 2 scripts going on here. One to mute the make the buttons mute the video and the other one is toggle the images.
jQuery(‘#mute-mute, #mute-unmute’).click(function() {
jQuery(‘#mute-mute, #mute-unmute’).toggle();jQuery(‘body’).on(‘click’, ‘#mute-mute’, function(){
YRC.Setups[0].player.player.mute();
});jQuery(‘body’).on(‘click’, ‘#mute-unmute’, function(){
YRC.Setups[0].player.player.unMute();
});
Now its time to add in the skip buttons. This allows you to move ahead or back 30 seconds, 1 minute, or 5 minutes. These are created using a simple arrow
<span class=”yt5mb”><img src=”backwardarrow.png” alt=”backwardarrow” /><img class=”tri2″ src=”backwardarrow.png” alt=”backwardarrow” /><img class=”tri3″ src=”backwardarrow.png” alt=”backwardarrow” />5M</span>
<span class=”yt1mb”><img src=”backwardarrow.png” alt=”backwardarrow” /><img class=”tri2″ src=”backwardarrow.png” alt=”backwardarrow” />1M</span>
<span class=”yt30secb”><img src=”backwardarrow.png” alt=”backwardarrow” />30S</span>
<span class=”yt30secf”><img src=”forwardarrow-1.png” alt=”forwardarrow1″ />30S</span>
<span class=”yt1mf”><img src=”forwardarrow-1.png” alt=”forwardarrow1″ /><img class=”tri2″ src=”forwardarrow-1.png” alt=”forwardarrow1″ />1M</span>
<span class=”yt5mf”><img src=”forwardarrow-1.png” alt=”forwardarrow1″ /><img class=”tri2″ src=”forwardarrow-1.png” alt=”forwardarrow1″ /><img class=”tri3″ src=”forwardarrow-1.png” alt=”forwardarrow1″ />5M</span>
Here is the code for each of those. Basically we are taking the current time and then jumping a head a bit.
jQuery(‘body’).on(‘click’, ‘.yt30secf’, function(){
var currentTime = YRC.Setups[0].player.player.getCurrentTime();
YRC.Setups[0].player.player.seekTo(currentTime + 30, true);
});jQuery(‘body’).on(‘click’, ‘.yt1mf’, function(){
var currentTime = YRC.Setups[0].player.player.getCurrentTime();
YRC.Setups[0].player.player.seekTo(currentTime + 60, true);
});jQuery(‘body’).on(‘click’, ‘.yt5mf’, function(){
var currentTime = YRC.Setups[0].player.player.getCurrentTime();
YRC.Setups[0].player.player.seekTo(currentTime + 300, true);
});jQuery(‘body’).on(‘click’, ‘.yt30secb’, function(){
var currentTime = YRC.Setups[0].player.player.getCurrentTime();
YRC.Setups[0].player.player.seekTo(currentTime – 30, true);
});jQuery(‘body’).on(‘click’, ‘.yt1mb’, function(){
var currentTime = YRC.Setups[0].player.player.getCurrentTime();
YRC.Setups[0].player.player.seekTo(currentTime – 60, true);
});jQuery(‘body’).on(‘click’, ‘.yt5mb’, function(){
var currentTime = YRC.Setups[0].player.player.getCurrentTime();
YRC.Setups[0].player.player.seekTo(currentTime – 300, true);
});jQuery(‘body’).on(‘click’, ‘.yt5mb’, function(){
var currentTime = YRC.Setups[0].player.player.getCurrentTime();
YRC.Setups[0].player.player.seekTo(currentTime – 300, true);
});
Now lets create a play and pause button.
<span id=”ytplay” class=”ytplay”><img src=”play.jpg” alt=”play” /></span>
<span id=”ytpause” class=”ytpause” style=”display: none;”><img src=”pause.jpg” alt=”pause” /></span>
Just like the mute buttons we are having them show and disspear depending on which one is used.
jQuery(‘body’).on(‘click’, ‘.ytplay’, function(){
YRC.Setups[0].player.player.playVideo();
});
jQuery(‘body’).on(‘click’, ‘.ytpause’, function(){
YRC.Setups[0].player.player.pauseVideo();
});
jQuery(‘#ytplay, #ytpause’).click(function() {
jQuery(‘#ytplay, #ytpause’).toggle();
});
Now there are a few extra features we want with the play and pause buttons. The plugin has a arrow that we want when clicked on, goes to the next video and pauses the current one.
jQuery(‘body’).on(‘click’, ‘.fis-arrow’, function(){
YRC.Setups[0].player.player.pauseVideo();
jQuery(‘#ytplay’).show();
jQuery(‘#ytpause’).hide();
});
We also want the video to play and pause when we click the large thumbnail that shows.
jQuery(‘body’).on(‘click’, ‘.yrc-video-link’, function(){
jQuery(‘#ytplay’).hide();
jQuery(‘#ytpause’).show();
});
Also if a user cancels the current video and clicks a small thumbnail we want the play and pause buttons to revert to their original state.
jQuery(‘body’).on(‘click’, ‘.yrc-playlist-item’, function(){
jQuery(‘#ytplay’).show();
jQuery(‘#ytpause’).hide();
});
We are going to want the videos buttons to respond to when you click on the video to play and pause it too.
function init_everything(){
YRC.EM.on(‘yrc.player_state_change’, function(e, d){
// d is an array with 2 elements, first one is YourChannel-specific info, second one the player event
if(d[1].data === -1){
// player is ready, show your custom controls
}
else if( d[1].data === 2 ) {
jQuery(‘#ytplay’).show();
jQuery(‘#ytpause’).hide();
}
else if( d[1].data === 1 ) {
jQuery(‘#ytplay’).hide();
jQuery(‘#ytpause’).show();
}
}); }if(window.YRC.EM) {
init_everything();
} else {
var yrctimer1 = setInterval(function(){
if(window.YRC.EM){
init_everything();
clearInterval(yrctimer1);
}
}, 100);
}
Lets get a volume slider in there
<div class=”slidercontainer”><input id=”volume-input” max=”100″ min=”0″ type=”range” value=”100″ /></div>
Lets also get some features of it too.
jQuery(‘body’).on(‘change’, ‘#volume-input’, function(){
YRC.Setups[0].player.player.setVolume(jQuery(this).val());
});