Sunday 17 July 2016
YouTube has become the standard way for delivering high quality video on the web. Sometimes, when you embed a video in your web application or landing page, you need a great deal of control on what and how is displayed. This is why we are going to show you how you can use the YouTube JavaScript Player API.
Initializing the player
The first step is to add a placeholder for the player and include the YouTube API.
<div id="video-placeholder"></div>
<script src="https://www.youtube.com/iframe_api"></script>
When the API is fully loaded, it looks for a global function called onYouTubeIframeAPIReady() which you should define. Inside it we will create a new instance of YouTube player. The first argument is the id of an HTML element we want to be replaced by the player, in our case that’s video-placeholder. The second one is an object containing the player options:
- The width and height of the player. These can be overwritten by applying CSS to #video-placeholder.
- The id of the video we want to be embedded when the player loads. You can get this id from any YouTube link by taking the string after ?v= (e.g. youtube.com/watch?v=WwoKkq685Hk)
- The playerVars object is a set of parameters. We made the color of the player white and created a playlist by providing two additional videos ids, separated by a coma. You can see a list of all available properties here.
- The events object consists of event listeners and the functions they call. The API passes down anevent object as the only attribute, containing the target and data. You can read more about events here.
The whole code look something like this:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: 'Xa0Q0J5tOP0',
playerVars: {
color: 'white',
playlist: 'taJ60kskkns,FG0fTKAqZ5g'
},
events: {
onReady: initialize
}
});
}
The
initialize() function will be called when the player fully loads. It will start an interval, updating some of our controls every second.function initialize(){
// Update the controls on load
updateTimerDisplay();
updateProgressBar();
// Clear any old interval.
clearInterval(time_update_interval);
// Start interval to update elapsed time display and
// the elapsed part of the progress bar every second.
time_update_interval = setInterval(function () {
updateTimerDisplay();
updateProgressBar();
}, 1000)
}Displaying current time and video duration
This is done by the
updateTimerDisplay(), one of the function called every second. It takes advantage of the API’s methods to give us adequate information about the video length.// This function is called by initialize()
function updateTimerDisplay(){
// Update current time text display.
$('#current-time').text(formatTime( player.getCurrentTime() ));
$('#duration').text(formatTime( player.getDuration() ));
}
function formatTime(time){
time = Math.round(time);
var minutes = Math.floor(time / 60),
seconds = time - minutes * 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ":" + seconds;
}
Methods are called using the player object we created in the begging. We can get how many seconds into the video we are in with
getCurrentTime(), and the total duration of the video with getDuration(). Both function will return second which we format correctly to look like time and then write into the DOM.Progress Bar
This is done using the
player.seekTo(sec) function, which jumps the video to the seconds provided in the parameter.
To demonstrate this we’ve made our own version of YouTube’s progress bar, using an input field of type range. When we click anywhere on it, we take the inputs value, witch gives us a percentage. We then use this percentage to calculate what progress we want made to the video and skip to the according seconds.
$('#progress-bar').on('mouseup touchend', function (e) {
// Calculate the new time for the video.
// new time in seconds = total duration in seconds * ( value of range input / 100 )
var newTime = player.getDuration() * (e.target.value / 100);
// Skip video to new time.
player.seekTo(newTime);
});
The code above allows us to control the video, but we also want the progress bar to move automatically as the video progresses. To understand how we do this, go back to the
initialize() function and more specifically its every-second interval and updateProgressBar().// This function is called by initialize()
function updateProgressBar(){
// Update the value of our progress bar accordingly.
$('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}------------------------------------------------------------------
Playback Controls
Nothing out of the ordinary here. Just make two buttons and call the needed method on click.
$('#play').on('click', function () {
player.playVideo();
});
$('#pause').on('click', function () {
player.pauseVideo();
});Sound Options
We can create a mute toggle button using the provided getter and setter methods of the player.
$('#mute-toggle').on('click', function() {
var mute_toggle = $(this);
if(player.isMuted()){
player.unMute();
mute_toggle.text('volume_up');
}
else{
player.mute();
mute_toggle.text('volume_off');
}
});
If we want to set the volume using a percentage we can use a number input field and the
setVolume() method. It will automatically validate the provided parameter, so we don’t have to worry about passing it floating values or numbers out of the [0 : 100] interval.$('#volume-input').on('change', function () {
player.setVolume($(this).val());
});Web development and design @Nishi IT Ltd.
D0main ,Hosting , Graphics Design ,SEO,Content writing..
www.nishi-it.com
html web design codes to learn html coding
ReplyDeleteBasic XHTML table code example