Control YouTube's Video Player with JavaScript

Control YouTube's Video Player with JavaScript - YouTube is a website that provides high quality video to a standard you can apply on your personal home page. Sometimes needed a tool that is applied to make it easier to control the video player would you show in your favorite web.

With a video display YOUTUBE Once you show on your pages will be easier to control. 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>

The second one is an object containing the player options:

• Width and height you define yourself.
• YouTube videos can you get by taking the id of youtube link supplied = (eg youtube.com/watch?v=WwoKkq685Hk)
• The playerVars object is a set of parameters. You can see a list of all available properties Here.
• The API passes down an event object as the only attribute, containing the targets and data. You can read more about the events Here.

Take a look and observe the code of the following functions:

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 played at full speed. It will begin interval and update some control at 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)

}

Displays the time and duration of the video

This is done by updateTimerDisplay (), a function that is called every second. It takes advantage of the API methods to provide adequate information about the length of the video.

// 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. (Control YouTube's Video Player with JavaScript)

Control YouTube's Video Player with JavaScript it is necessary for a perfect setting to display YouTube videos in your web pages. For more quickly you can download this script on the following link.

DOWNLOAD | DEMO

 Keyword Search: Control YouTube's Video Player with JavaScript

Control YouTube's Video Player with JavaScript 2015-10-02T01:07:00-07:00 Rating: 4.5 Diposkan Oleh: Kang Icung