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>
<div id='player'></div>
<div id='chooseVideo'></div>

<div id="result" class='ux'></div>

CSS

.ux {
    padding: 10px;
    float: left;
}

#quiz {
    /*background-color: lightgray;*/
}
#result{
    color: blue;  
}

JavaScript

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

// 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,// autoplay the initial video
            start: 10,//NOT WORKING????-->
            rel:0,//  Don’t show related videos
            controls: 1,// Show player controls
            showinfo: 0,// Don’t show title or loader
            modestbranding: 1// No You Tube logo on control bar
             
            },
        events: {
            onReady: onReady,// Callback when onReady fires
            onStateChange: onStateChange,// Callback when onStateChange fires
            onError: onError// Callback when onError fires
        }
    });
}

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

// When the player is ready, play the initial segment
function onReady(event) {
  console.log("ready");
  playSegment();//call function 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
    });
}

// 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 =...