You Tube Video API - LMS

A demo showing how video might be used in a Learning Management System.

by Vimla Ramdoo

HTML

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

<h2> Events </h2>
<p> Watch the various evens held by Pasta Pane</p>
<div id='player'></div>
<div id='chooseVideo'></div>
<div id="result" class='ux'></div>

CSS

.ux {
    float: left;
    padding: 1%;
    width: 48%;
}

.correct {
    color: green;
}

#quiz {
    background-color: lightgray;
}

.incorrect {
    color: red;
}

JavaScript

var player;                 // You Tube player object
var video;                  // Current video
var instructionEnded=false; // Instruction video is still running

//By default => for the first video
var start = 100;
var end = 120;

// When You Tube API is ready, create a new 
// You Tube player in the div with id 'player'
function onYouTubeIframeAPIReady() {
    resetVideo();
    player = new YT.Player('player', {       
        playerVars: {
            autoplay: 1,
            rel:0,
            theme: "light",
            controls: 1,
            showinfo: 0,
            modestbranding: 1// No You Tube logo on control bar
             
            },
        events: {
            onReady: onReady,
            onStateChange: onStateChange,
            onError: onError
        }
    });
}

function resetVideo() {
    video = media.video;
}

// When the player is ready, play the initial segment
function onReady(event) {
  console.log("ready");
  playSegment();
}

// When the introductory clip has finished playing, 
//build the options for users to choose desired videos to be viewed

function onStateChange(event) {
   console.log('onStateChange', event);
    if (event.data == YT.PlayerState.ENDED) {
        if (!instructionEnded) {
            instructionEnded = true;
            buildQuestion();
        }
    }
}

// Log any errors
function onError(event) {
    console.log('onError', event);
}

// Play the video segment
function playSegment( ) {
    // Play the current video
    player.loadVideoById({
        videoId: video,
        startSeconds: start, // ADDED!!!!
        endSeconds: end, // ADDED!!!!
    });
}

// Submit the viewers answer to the desired video
function submit() {
    // Initially assume nothing is checked
    var checked = false;
    var html = "";
    
    // Get the element correspnding to thee multiple choice element
    var mcq = document.getElementsByName('mcq');
    
    // Iterate through the possible choices
    for (var i=0;...