jQuery: Incorrect use of variables on video function

Question

Tying to play videos but The use of my variables are not working.

First video play only once, when stops second video starts.
Second video plays and loops.
Video should play smoothly with no gaps and no jumps.

My Demo: http://jsfiddle.net/654geqvp/1/

var start = [
    "http://praegnanz.de/html5video/player/video_SD.webm",
    "http://praegnanz.de/html5video/player/video_SD.webm",
    "http://praegnanz.de/html5video/player/video_SD.mp4"];

var loop = [
    "http://broken-links.com/tests/media/BigBuck.webm",
    "http://broken-links.com/tests/media/BigBuck.theora.ogv",
    "http://broken-links.com/tests/media/BigBuck.m4v"];

    var curSrc = 0;
    $(function() {
      $('#start').attr(start, start[curSrc % start.length]);
      curSrc++;
      var video = $('#start').get(0);

      $('#start').on('loadedmetadata', function() {
        video.currentTime = 0.01;
        video.play();
      }).on('ended', function() {
        //console.log('ended');
        video.loop = loop[curSrc % loop.length];
        video.load();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="start" style="width:100%;"></video>

@Mr.Polywhirl not sure what you mean, Even locally doesn't work — DDfrontenderLover, Jan 20 '15 at 11:53
Have you checked this out?: [*MSDN: Using JavaScript to control the HTML5 video player*](http://msdn.microsoft.com/en-us/library/ie/hh924823%28v=vs.85%29.aspx). Also, you do not need to link to JSFiddle anymore, Stack Overflow has embedded snippets for JavaScript. — Mr. Polywhirl, Jan 20 '15 at 12:04
@Mr.Polywhirl thanks, yes that's brilliant. good to know. Would u be able to help me with this plaese? I'm not able to find a solution — DDfrontenderLover, Jan 20 '15 at 12:09
See: [*How do you detect HTML5 video events?*](http://stackoverflow.com/a/2954618/1762224). Try to replace `on('ended')` with `bind('ended')`. You could also try [attaching the event natively](http://stackoverflow.com/a/2741527/1762224): `$('#start')[0].onended = function(e){};` — Mr. Polywhirl, Jan 20 '15 at 12:14
@Mr.Polywhirl not sure where $('#start')[0].onended = function(e){}; goes — DDfrontenderLover, Jan 20 '15 at 12:28
@Mr.Polywhirl something like this: http://jsfiddle.net/654geqvp/2/ ? bust still doesn't work. — DDfrontenderLover, Jan 20 '15 at 12:46
[`Video.loop`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-loop) is a boolean value, not a string. I cannot assist you further. You need to read up some more on the Video object. Try to code in pure JavaScript first, get that to work and then try using jQuery. — Mr. Polywhirl, Jan 20 '15 at 12:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69210/discussion-between-user3699998-and-mr-polywhirl). — DDfrontenderLover, Jan 20 '15 at 12:59

Mr. Polywhirl · Accepted Answer · 2015-01-20T14:59:54.493

I figured it out, I changed some variable names around. You need to set the loop attribute on the video to true. You can remove the controls attribute it you wish. I converted the original to a jQuery plugin.

To get rid of the black flash when transitioning videos, you can set the poster attribute of the video element to be the first frame of the second video.

$.fn.videoLoop = function(options) {
  var video = $(this),
    videoEl = video.get(0),
    selVideoIdx = 0;

  options = options || {};

  var playlist = options.playlist || [],
    // Use a white background by default if a poster is not provided. This
    // should prevent the transition from showing a black screen. If possible,
    // use the first frame of the looping video or a solid color to match
    // the backdrop of the video.
    poster = options.poster || "http://placehold.it/1024x768/FFFFFF/FFFFFF";

  if (playlist.length > 1) {
    video.attr('src', playlist[selVideoIdx % playlist.length]);
    video.attr('poster', poster);
    video.attr('autoload', true);
    selVideoIdx++;

    video.on('loadedmetadata', function() {
      videoEl.currentTime = 0.5;
      videoEl.play();
    }).bind('ended', function() {
      videoEl.src = playlist[selVideoIdx % playlist.length];
      videoEl.loop = true;
      videoEl.load();
    });
  }
};

$(function() {
  $('#start').videoLoop({
    'playlist': [
      '../video-start/Homepage_video_ref_v01.mp4',
      '../video-loop/7_Sec_Loop_v01.mp4'
    ],
    'poster': "http://placehold.it/1024x768/6DBBD2/6DBBD2"
  });
});

video {
  width: 100%;
  background: #53abc5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="start" controls="controls"></video>

jQuery: Incorrect use of variables on video function

1 Answers1