You Tube Video API - LMS

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

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"               -->

<h2> Select a video </h2>
<select id="selectVideo" onchnage="playSegment()">
</select>

CSS

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

.correct {
    color: green;
}

#quiz {
    background-color: lightgray;
}

.incorrect {
    color: red;
}

JavaScript

// 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: 0,
            start: 10,
            rel:0,
            theme: "light",
            controls: 1,
            showinfo: 0,
            modestbranding: 1
             
            },
        events: {
            onReady: onReady,
            onStateChange: onStateChange,
            onError: onError
        }
    });
}

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

// When the instructional part of the clip has finished
// playing, build the quiz question to test the
// viwers understanding
function onStateChange(event) {
   console.log('onStateChange', event);
    if (event.data == YT.PlayerState.ENDED) {
        console.log("video ended");
        }
    }
}

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

// Play the video segment
function playSegment( ) {
    // Play the current video
    var selected = document.getElementById("selectVideo").value;
    player.loadVideoById({
        videoId:  media[selected].video
    });
}

// In a real application, the items below would come from a database
var media = [
    {
        video: "a1YzCWeoHdc",
        title: 'Apple',
        description: 'Eating an apple a day keeps the doctor away!'
    },
    {
        video: "EkQooes5R2k",
        title: 'Banana',
        description: 'A banana is a good source of engery'
    },
        {
        video: 'kgEkCtmkXUI',
        title: 'Carrot',
        description: "Carrots are good for your eye sight!"
    },
    {
        video: 'MfUcsgtNN24',
        title: 'Hat',
        description: 'Belongs on your head, not in your kitchen or your tummy!'
    }
 ];

function loadVideoSelectMenu() {
   var htmlText = "";
   for (var i=0;...