Category: Web Development

Last Tested: 11/21/2020

Sometimes a web developer needs to perform this very important control/monitoring functionality. Whether you need to play a video, see if a video has been watched in its entirety or just integrate the embedded youtube video’s functionality into your code for another reason, it can all be done using the youtube API.

The first important (albeit basic) part of using the Youtube API for these functions is that although the video on your page will look like an embed, you are actually putting an empty div on your page with HTML and the Javascript calls the API and replaces that div with the video you specify.

1. Put the following in the code of your HTML page:

<div id="video-placeholder"></div>

2. Include a javascript file with the following content (but change videoId to the ID of your video):

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
        }
    });
}

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)

}

3. Include this code in your html page to get the current duration of the video automatically updated:

// 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;
}

4. Include this code in your HTML page to add a play button for the video:

$('#play').on('click', function () {

    player.playVideo();

});

5. Include this code in your HTML page to add a pause button for the video:

$('#pause').on('click', function () {

    player.pauseVideo();

});

Disclaimer: I do not work for youtube and so had no involvement whatsoever in the creation of Youtube or it’s excellent API. For more information about using the youtube embed API visit the site listed in my sources for a more in-depth explanation.

Source(s):

1. https://tutorialzine.com/2015/08/how-to-control-youtubes-video-player-with-javascript

Ok, lets start by saying that I know the title is a lot. It is not just one or two tools that this guide helps you install, it’s all of those tools listed above, plus a few more that are required to run those tools.

But Ben, why not break this guide into several easier-to-manage guides that install one or two tools at a time? Well, I am writing this guide to help with all of those installations, BUT you can start this guide from anywhere and just pick and choose the tools you want.

First, Atom. The atom editor is the easiest of the bunch to install, just go to https://www.atom.io and download it. The website will automatically detect your OS (unless you are on a crazy one or have some kind of unusual configuration). Easy, one step

Next we will go on to installing Brew. At the time of writing this guide, the terminal command to execute is:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

but if that is not working for some reason or you want to troubleshoot, you can go to https://www.brew.sh . Wow, another one-stepper, I guess this guide is shorter than you thought.

Next we will install Node which as noted in the title will allow you to use both the npm and npx commands. For this installation I recommend using a package manager such as Brew and fortunately I just showed you how to install one above. All we have to do for this one is run the command:

brew install node

and you will now be able to use npm, npx and node packages in general. If you want to confirm that node is in fact installed on you computer you can run node -v.

We are just flying through this guide! Next, we will install composer. To be honest, you may not have to use this tool much after today, but let’s just install it anyway because it is a great tool and a requirement for the next step which is installing valet.

Honestly, follow the instructions at this link for the best results: https://github.com/squizlabs/PHP_CodeSniffer

(but the executable path is /usr/bin/phpcs on linux)

I recommend you have composer already to install this but as you can see from their instructions, you can get by without composer (it is just not as simple).

An overview of what you are doing in the instructions:

1. downloading the phar files.
2. Using composer to make the codesniffer available globally.
3. Adding the new phpcs to your PATH system variable