source: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js@ 29867

// Sample Media Player using HTML5's Media API
// 
// Ian Devlin (c) 2012
// http://iandevlin.com
// http://twitter.com/iandevlin
//
// This was written as part of an article for the February 2013 edition of .net magazine (http://netmagazine.com/)

// Wait for the DOM to be loaded before initialising the media player
document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);

// Variables to store handles to various required elements
var mediaPlayer;
var playPauseBtn;
var muteBtn;
var progressBar;

var mediaStartPlayTime;
var mediaStartPauseTime;
var mediaPlayedNotes;

function initialiseMediaPlayer() {

    mediaStartPlayTime  = null;
    mediaStartPauseTime = null;
    mediaPlayedNotes = {};

    // Get a handle to the player
    mediaPlayer = document.getElementById('video');
    
    // Get handles to each of the buttons and required elements
    playPauseBtn = document.getElementById('play-pause-button');
    muteBtn = document.getElementById('mute-button');
    progressBar = document.getElementById('progress-bar');

    // Hide the browser's default controls
    mediaPlayer.controls = false;
    
    // Add a listener for the timeupdate event so we can update the progress bar
    mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);

        // Add a listener so the video can be advanced if the progress bar is clicked on
    progressBar.addEventListener("change", progressBarChanged);


    // Pause the video when the slider handle is being dragged
    progressBar.addEventListener("mousedown", function() {
    mediaPlayer.pause();
    });
    
    // Play the video when the slider handle is dropped
    progressBar.addEventListener("mouseup", function() {
    mediaPlayer.play();
    });

    // Add a listener for the play and pause events so the buttons state can be updated
    mediaPlayer.addEventListener('play', function() {
        // Change the button to be a pause button
        changeButtonType(playPauseBtn, 'buttonx2 pause');
    }, false);
    mediaPlayer.addEventListener('pause', function() {
        // Change the button to be a play button
        changeButtonType(playPauseBtn, 'buttonx2 play');
    }, false);
    
    // need to work on this one more...how to know it's muted?
    mediaPlayer.addEventListener('volumechange', function(e) { 
        // Update the button to be mute/unmute
        if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute');
        else changeButtonType(muteBtn, 'button mute');
    }, false);  
    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
}

function togglePlayPause() {
    // If the mediaPlayer is currently paused or has ended
    if (mediaPlayer.paused || mediaPlayer.ended) {
        if (mediaStartPlayTime == null) {
            mediaStartPlayTime = Date.now();
        //console.log("*** mediaStartPlayTime=" + mediaStartPlayTime);
        mediaPlayedNotes[String(mediaStartPlayTime)] = [];

        }
        else {
        var mediaPauseBuildup = mediaStartPauseTime - Date.now();

        // adjust the start play time to the pause is effectively ignored
        mediaStartPlayTime += mediaPauseBuildup;
        mediaStartPauseTime = null;

        }

        // Change the button to be a pause button
        changeButtonType(playPauseBtn, 'buttonx2 pause');
        // Play the media
        mediaPlayer.play();
    }
    // Otherwise it must currently be playing
    else {
        mediaPauseTime = Date.now();

        // Change the button to be a play button
        changeButtonType(playPauseBtn, 'buttonx2 play');
        // Pause the media
        mediaPlayer.pause();

        console.log("*** mediaPlayedNotes = " + JSON.stringify(mediaPlayedNotes));
    }
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

function convertSecsToTimeStr(time)
{
    var int_mins = Math.floor(time / 60);   

    var float_secs = time % 60;
    //var int_secs = Math.floor(float_secs); 
    
    //var float_sub_sec = float_secs - int_secs;
    //var int_sub_sec = float_sub_sec.toFixed(2)

    var padded_secs = pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place
    return int_mins + ":" + padded_secs
}


function displayCurrentTime()
{
    var currentTime = mediaPlayer.currentTime;
    var formattedTime = convertSecsToTimeStr(currentTime);
    $('#mediaPlayerCurrentTime').html(formattedTime);
}

function displayDuration(duration)
{
     var formattedTime = convertSecsToTimeStr(duration);
     $('#mediaPlayerTotalTime').html(formattedTime);
}


// Stop the current media from playing, and return it to the start position
function stopPlayer() 
{
    mediaPlayer.pause();
    mediaPlayer.currentTime = 0;
    displayCurrentTime();
}

// Changes the volume on the media player
function changeVolume(direction) {
    if (direction === '+') mediaPlayer.volume += mediaPlayer.volume == 1 ? 0 : 0.1;
    else mediaPlayer.volume -= (mediaPlayer.volume == 0 ? 0 : 0.1);
    mediaPlayer.volume = parseFloat(mediaPlayer.volume).toFixed(1);
}

// Toggles the media player's mute and unmute status
function toggleMute() {
    if (mediaPlayer.muted) {
        // Change the cutton to be a mute button
        changeButtonType(muteBtn, 'button mute');
        // Unmute the media player
        mediaPlayer.muted = false;
    }
    else {
        // Change the button to be an unmute button
        changeButtonType(muteBtn, 'button unmute');
        // Mute the media player
        mediaPlayer.muted = true;
    }
}

// Replays the media currently loaded in the player
function replayMedia() {
    resetPlayer();
    mediaPlayer.play();
}

// Update the progress bar
function updateProgressBar() {
    // Work out how much of the media has played via the duration and currentTime parameters
    var percentage = (100 / mediaPlayer.duration) * mediaPlayer.currentTime;

    // Update the progress bar's value
    progressBar.value = percentage;

    // Update the progress bar's text (for browsers that don't support the progress element)
    progressBar.innerHTML = Math.floor(percentage) + '% played';

    displayCurrentTime();
}

function progressBarChanged() {
    //console.log("**** progress bar changed!")
    // Calculate the new time
    var time = mediaPlayer.duration * (progressBar.value / 100);

    // Update the video time
    mediaPlayer.currentTime = time;
    displayCurrentTime();
}

// Updates a button's title, innerHTML and CSS class to a certain value
function changeButtonType(btn, value) {
    btn.title = value;
    btn.innerHTML = value;
    btn.className = value;
}

// Loads a video item into the media player
function loadVideo() {
    for (var i = 0; i < arguments.length; i++) {
        var file = arguments[i].split('.');
        var ext = file[file.length - 1];
        // Check if this media can be played
        if (canPlayVideo(ext)) {
            // Reset the player, change the source file and load it
            resetPlayer();
            mediaPlayer.src = arguments[i];
            mediaPlayer.load();
            break;
        }
    }
}

// Checks if the browser can play this particular type of file or not
function canPlayVideo(ext) {
    var ableToPlay = mediaPlayer.canPlayType('video/' + ext);
    if (ableToPlay == '') return false;
    else return true;
}

// Resets the media player
function resetPlayer() {
    mediaStartPlayTime = null;
    mediaStartPauseTime = null;
    
    // Reset the progress bar to 0
    progressBar.value = 0;
    // Move the media back to the start
    mediaPlayer.currentTime = 0;
    displayCurrentTime();
    // Ensure that the play pause button is set as 'play'
    changeButtonType(playPauseBtn, 'play');
}