You Tube Video API - JavaScript Template

This fiddle is a starter template that uses JavaScript to load a video and set basic parameters.

by Brian von Konsky

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<!-- Business Web Technology (ISYS3004) -->
<!-- School of Information Systems      -->
<!-- Curtin University                  -->

<!-- See External Resources for you tube api reference -->
<!-- https://www.youtube.com/iframe_api"               -->

<div id='player_div'></div>
<div id='ux'>
    <label>start (sec)</label><input id='start' type='text' value='0'/>
    <label>stop (sec)</label><input  id='stop' type='text' value='60' />
    <button onclick='rangePlayback()'>Submit</button>
</div>
<div id='history_div'></div>

CSS

.error {
    color: red;
}

#ux { visibility: hidden; }

label {
    display: inline-block;
    width: 50px;
    text-align: right;
    padding: 5px;
}

JavaScript

var player;                  // You Tube player object
var videoId="P5_GlAOCHyE";   // You Tube ID
var theHistory = "";
var startTime = -1;


// When You Tube API is ready, create a new 
// You Tube player in the div with id 'player'
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player_div', 
    {
        videoId: 'P5_GlAOCHyE',   // Load the initial video
        playerVars: {
               autoplay: 0,      // Don't autoplay the initial video
               rel: 0,           //  Don’t show related videos
               theme: "light",   // Use a light player instead of a dark one
               controls: 1,      // Show player controls
               showinfo: 0,      // Don’t show title or loader
               modestbranding: 1 // No You Tube logo on control bar
        },
        events: {               
               // Callback when onReady fires
               onReady: onReady,
            
               // Callback when onStateChange fires
               onStateChange: onStateChange,   

               // Callback when onError fires
               onError: onError
        }
    });

}

// This function does a playback by range specified in the interface
// It is the principal addition to the fiddle for Mocule 10, Activity 2 
function rangePlayback() {
    var start = document.getElementById('start').value;
    var stop  = document.getElementById('stop').value;
    player.loadVideoById({
        videoId: videoId,
        startSeconds: start,
        endSeconds: stop
    });
}

// Callback specified to process the onReady event has been received
// so can proceed with creating and managing You Tube player(s)
function onReady(event) {
  var time = getTime();
  theHistory = "player ready " + time + "<br/>" + theHistory;
  document.getElementById("history_div").innerHTML = theHistory;
  console.log("player ready");
 
  // Make the video interface visible since we're now ready to go
   document.getElementById('ux').style.visibility =...