www.youtube.com contains the great collection of video on the internet. It usage rates trounce any other video source site. It is common to the entire world of Internet users and as much a part the typical users Google experience as their search engine.

The central technology of the site is the flash player which is invoked by the user when a video is requested from youtube.com. This Adobe product had been around for years and is a standard for video display. Conversion from various media to the flash file format (called *.swf files) requires the use of various Adobe products to get the media into the correct video format for the flash player. youtube.com has done this task the user and the only thing to user need to do is invoke that flash player and download the *.swf file from youtube.com.

It has been a standard policy at youtube.com to provide for each video in their inventory a small snippet of code that allows anyone to "embed" a youtube video on to any web page. To find this code snippet. Load any youtube video into your browser and below the video you will see an arrow followed by the word "SHARE". If you click the "SHARE" another menu appears with a second link that says "EMBED". Click this link and in a textbox the one line the HTML code appears -- such as this:

CAUTION:

This demonstration will NOT work in a mobile environment! On both IPhone and Android

It is will only work from a desktop

This webpage is designed to allow a user to choose from a music list and then start playing the chosen musical sellection. However, this requires the code to utilize and "autostart" which has been disabled by the mobile device manufacturers. Their rational is:

Autoplay: Not supported on iPhone or Android; supported on all desktop browsers, iPad, Firefox and Opera for Android.

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

The HTML says to place an iframe (a container with some HTML inside it which can appear anywhere on a webpage). This iframe:

If you know the video's identifier, you can do more things than take it as youtube.com gave it to you.

swfobject.embedSWF(swftoplay, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)

Then on the HTML page would be the DIV with the id (the second parameter of the swfobject.embedSWF -- in this case the name coden was "fout") like this:

The purpose here is to demonstrate the degree of control you have over the youtube player in a standalone environment you create yourself.

But with youtube, Google recommends (insists) you use their player definition that comes with the "embed" tag demonstrated above.

See what Google says here about the way it load the HTML iframe from the recommended "embed" that comes with each youtube video:

Google provides a script to use in your HTML pages. It runs in-line (i.e., as the page is loaded and parsed the code is executed as encountered). Here is their recommended use of the embeded youtube video:

<!DOCTYPE html>
<html>
  <body>
    
    <div id="player"></div>
    <script>
      //    2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      //   3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '<i>11 byte youtube video ID here</i>',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      //   4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
      //   5. The API calls this function when the player's state changes.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data != YT.PlayerState.PLAYING && !done) {
          done = true;
        }
      }
    </script>

This is OK for a single embed for a single youtube video. But we have grander aspirations. What we will do is make a playlist (i.e., a lot of videos that our user can pick from) and annotate each video (i.e, provide some additional text to show along side the video). We will you my top 30 Bob Dylan songs as our video playlist and show the lyrics as the songs play (a necessary aid as the lyrics are complicated and are not sometimes easy to pick out over the music and Dylan's often emotional verbal expression)

Go to the page and watch and listen. Click on any of the 30 songs in the blue list below the player. There are also a few straight .mp3 audio files that did not come from youtube. We will deal with these audios differently.

Here is complete annotated code (shortened to make it easier to understand)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link {color: blue;}
a:visited {color: blue;}
a:hover {color: blue;}
a:active {color: red;}
</style>
<script language="javascript">
var splash_sw=0;
var fsw=0;
var pause_sw="off";
var tag;
var done = false;
var player;
var firstScriptTag;
var etop;
var eleft;
var adiv=[" <p><center><img src='Love_and_Theft.jpg' style='width:300px;'></center>"," <p><center><img src='Hard_Times_2.png' style='height:300px;'><span style='padding-left:40px;'><img src='Hard_Times.jpg' style='height:308px;'></span></center>"," <p><center><img src='Emmylou_Harris.jpg' style='height:300px;'></center>"," <p><center><img src='Street_Legal.jpg' style='width:300px;'></center>"];
var afile=[];
var vid=[
// there are thirty of the following 3 element arrays
// each contains:
//   the video id string
//   the title string
//   the lyrics string
//   the last one does NOT end in a comma
//
//   the general format is:

[ "11 byte youtube id" , "Song title</a>[date]" , "lyrics string" ],

];
var cvid=0; // current video array locations in the two dimensional array named <b>vid</b>
var tmr;    // timer object
var vora;   // video our audio file switch "v" is a video, "a" is an audio file

function loadandgo(n) // this loads a video when as users clicks on the blue song links
{ 
  if (vid[n][1].indexOf("(")>-1)                              // does the title specify a alternative performer (if so insert a line break) 
      vid[n][1]=vid[n][1].replace("(","<br> (");      // Insert a line break in the title when the lyrics are shown
  document.getElementById("title").innerHTML=" "+vid[n][1]; // places the title in the second column
  document.getElementById("lout").innerHTML=vid[n][2];           // places the lyrics in the second column             
  document.getElementById("splash").style.display="none";        // turns off the splash page overlay

if (vid[n][0].indexOf("mp3") > -1)  // is it an audio file?
     {
      vora="a"; // set the switch to "a" audio
      document.getElementById("mout").style.display="block";   // turn on the audio player DIV  
      document.getElementById("player").style.display="none";  // hide the you tube player DIV
      for (i=0;i<afile.length;i++) // find the the audio file in the afile array
          {
           if (afile[i]==vid[n][0])
              {
               afile_span.innerHTML=adiv[i]; // place the HTML for the audio file into the audio player DIV
              }
          }          
      aplayer.src=vid[n][0]; // get the audio file
      aplayer.play();        // start it 
      player.pauseVideo();   // pause any video playing in the player   
     }      
     else
     {
      vora="v";  // set the switch to "v" vudio
      document.getElementById("mout").style.display="none";         // hide the audio player DIV
      document.getElementById("player").style.display="block";      // show the video player DIV
      aplayer.pause();                                              // pause any audio still running   
      player.loadVideoById({videoId:vid[n][0]});                    // load the requested video
     } 
}
function go() // executed on page load
{ 
// create the string of links by rolling through the vid array to get the song titles
 o="<b> Songs by written and performed by Bob Dylan (and other artists)<br> Click a link below to start play</b>:<br>";
 for (i=0;i<vid.length;i++)
     {
      o=o+"<br>  <a href='#' onclick='loadandgo("+i.toString()+")'>"+vid[i][1];
      if (vid[i][0].indexOf("mp3") >-1) // if an audio file is found add it to the afile array
         {
          afile.push(vid[i][0]); // 
         }
     } 
 div1.innerHTML=o+"<br> "; // place the song links on the page
 go2();                               // build the video player
}
function tup() // this is a one second interval timer that changes the current audio or video time
{
 if (vora=="a")
  {
  var cur=aplayer.currentTime; 
  var dur=aplayer.duration; 
  mins=parseInt( parseFloat(dur)/60.0 )
  secs=(dur-60*mins).toFixed(0);
  if (secs.length==1)secs="0"+secs.toString();
  out=mins.toString()+":"+secs;
 
  cmins=parseInt( parseFloat(cur)/60.0 )
  csecs=(cur-60*cmins).toFixed(0);
  if (csecs.length==1)csecs="0"+csecs.toString();
  out2=cmins.toString()+":"+csecs;
  
  pbw=parseInt((cur*200.0)/dur);
  document.getElementById("pb").style.width=pbw.toString()+"px";
  document.getElementById("durout").innerHTML=out2.toString()+"/"+out.toString();
  }
  else
  {
  var dur=player.getDuration(); 
  var cur=player.getCurrentTime(); 
  mins=parseInt( parseFloat(dur)/60.0 )
  secs=(dur-60*mins).toFixed(0);
  if (secs.length==1)secs="0"+secs.toString();
  out=mins.toString()+":"+secs;
  
  cmins=parseInt( parseFloat(cur)/60.0 )
  csecs=(cur-60*cmins).toFixed(0);
  if (csecs.length==1)csecs="0"+csecs.toString();
  out2=cmins.toString()+":"+csecs;
  
  pbw=parseInt((cur*200.0)/dur);
  document.getElementById("pb").style.width=pbw.toString()+"px";
  document.getElementById("durout").innerHTML=out2.toString()+"/"+out.toString();
  } 
}
function go2() // builds the using the youtube recommended code
{
//       1. This code loads the IFrame Player API code asynchronously.
      tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
      firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 2. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
}
function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          playerVars: {
            modestbranding: 1,
            rel: 0,
            wmode: "transparent"
         },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      // 3. The API will call this function when the video player is ready.
function onPlayerReady(event) {
        if (fsw==0) // if the first time through
           {
             event.target.pauseVideo(); //pause the video
             fsw=1;
             if (splash_sw==0) // if the splash page hasn't been built build it
                {
                 get_element_location("player");                                      // get the location of the player top and left
                 pwide=document.getElementById("player").width;                                  
                 ptall=document.getElementById("player").height;
                 document.getElementById("splash").style.width=pwide.toString()+"px"; // set the splash page to the same location and size
                 document.getElementById("splash").style.height=ptall.toString()+"px";             
                 document.getElementById("splash").style.top=etop.toString()+"px";             
                 document.getElementById("splash").style.left=eleft.toString()+"px";             
                 document.getElementById("splash").style.display="block";             // show the splash page
                 vora="v";                 
                 splash_sw=1;                                                         // turn of splash page creation
                 document.getElementById("mout").style.width=pwide.toString()+"px";   // set the size and location ofthe audio DIV
                 document.getElementById("mout").style.height=ptall.toString()+"px";             
                 document.getElementById("mout").style.top=etop.toString()+"px";             
                 document.getElementById("mout").style.left=eleft.toString()+"px";             
                 document.getElementById("mout").style.display="none";                // turn off the audio DIV display
                 tmr=setInterval(tup,1000);                                           // start the one second timer 
                }
           }
        else
            event.target.pauseVideo();   // pause any video
      }
      // 4. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.