title: Html5 video function should have only one video to play
body: <p>Based on this function, <strong>how can I have only the first video to play?</strong>
  I'm not longer need the second one on this function!</p>
  
  <p>this video was initially created to play 2 videos, where the second one was looping through. Really clever but it gives me black flashes on ie9, which I can't fix.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    (function($)
      {$.fn.videoLoop = function (options) {
          
       function changeVideoSrc(vidObj,vidEl){
           vidEl.html("");
           vidObj.media.forEach(function(obj){
               console.log(obj);
               vidEl.append($("&lt;source&gt;").attr("src",obj.src).attr("type",obj.format));
           });
       }
          
        var video = this,
        videoEl = video[0],
        selVideoIdx = 0;
      
        options = options || {};
      
        var playlist = options.playlist || [],
        poster = options.poster || "http://placehold.it/1024x768/FFFFFF/FFFFFF";
      
      if (playlist.length &gt; 1) {
        var firstvid = playlist[selVideoIdx % playlist.length];
        changeVideoSrc(firstvid,video);
        video.attr('poster', poster);
        video.attr('autoload', true);
        video.attr('autoplay', true);
        selVideoIdx++;
      
        video.on('loadedmetadata', function () {
            videoEl.currentTime = 0.5;
            videoEl.play();
        }).bind('ended', function () {
            var currentvid = playlist[selVideoIdx % playlist.length];
            changeVideoSrc(currentvid,video);
            videoEl.loop = true;
            videoEl.load();
            selVideoIdx++;
          });
        }
      };
      
      
       
      var video1 = {};
      video1.title = 'FIRST';
      video1.media = [{'format':'video/mp4','src':'http://www.w3schools.com/html/mov_bbb.mp4'},{'format':'video/ogv','src':'http://www.w3schools.com/html/mov_bbb.ogv'}];
       
  
  
      var video2 = {};
      video2.title = 'LOOP';
      video2.media = [{'format':'video/mp4','src':'http://media.w3.org/2010/05/sintel/trailer.mp4'},{'format':'video/ogv','src':'http://media.w3.org/2010/05/sintel/trailer.ogv'}];
      
      var data = {};
      data.playlist = [video1,video2];
      data.poster = "http://placehold.it/1024x768/000000/FFFFFF"
      
      
      $('#start').videoLoop(data);
      
      }(jQuery));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="video-start target"&gt;
  &lt;video id="start" width="400" height="300" controls&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>