Week 13: demo

Scripting Media



Scripting Audio

We have already explored how to incorporate audio and video files into our HTML, but we can also control the playback and various properties of these media assets using JavaScript.

play

pause

document.querySelector("#box1").addEventListener("click", function(){
    document.querySelector("#nwa").play();
});

document.querySelector("#box2").addEventListener("click", function(){
    document.querySelector("#nwa").pause();
});

jQuery is slightly different in its approach to controlling media elements.

play

pause

$(document).ready(function(){
    $("#box3").click(function(){
        $("#nwa").trigger("play");
    });
    $("#box4").click(function(){
        $("#nwa").trigger("pause");
    });
});

A little additional logic and reading the paused property from the audio HTML element allows us to toggle playing and pausing the audio with a single button. Note that we need to use the vanilla JavaScript document.querySelector() method to access the HTML media element in order to have access to the paused property.

play/pause

$(document).ready(function(){
    $("#box5").click(function(){
        var obj = document.querySelector("#nwa");
        if(obj.paused){
            obj.play();
        } else {
            obj.pause();
        }
    });
});

We can control the volume of audio elements. Use one of the buttons above to play the song and adjust the volume using the slider below.


$(document).ready(function(){
    $("#volumeslider").on("input change", function(){
        var vol = $(this).val() * 0.01;
        $("#nwa").prop("volume", vol);
    });
});

Scripting Video

The same techniques we use to control a <audio> element can be used to control a <video> element.



play/pause


$(document).ready(function(){
    $("#box6").click(function(){
        var obj = document.querySelector("#myvideo");
        if(obj.paused){
            obj.play();
        } else {
            obj.pause();
        }
    });
    $("#videovolumeslider").on("input change", function(){
        var vol = $(this).val() * 0.01;
        $("#myvideo").prop("volume", vol);
    });
});

Scripting YouTube Video

Dealing with a YouTube video embedded in an iFrame is a little bit different and involves having more of an understanding of the YouTube API. The example below loads a YouTube video using JavaScript, and when the user hits play it will begin a 6 second timer upon which point it will automatically be stopped.



var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    width: '100%',
    videoId: 'Q_GFgmvF_eE',
    playerVars: {
        'playsinline': 1,
        'controls': 0
    },
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
    }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000);
    done = true;
    }
}
function stopVideo() {
    player.stopVideo();
    done = false;
}

Resources