CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
erezT
erezT

Reputation: 186

Trying to Loop an HTML5 Video Array

I'm running this array that plays the video array, but ends abruptly and doesn't loop. Of course I tried the HTML video attribute loop and loop="true" and loop="loop"... with no avail..

I just want to loop'it t'night:

var videos =
    [
        [
            "img/poster.png",
            "img/trippyInk.mp4"
        ],
        [
            "img/poster.png",
            "img/brothaDive.webm"
        ],
        [
            "img/poster.png",
            "img/wtuD97H.webm"
        ],
        [
            "img/poster.png",
            "img/ride.webm"
        ]
    ];
function switchVideo(n) {
    if (n >= videos.length) n = 0;

    var mp4 = document.getElementById("mp4");
    var parent = mp4.parentNode;

    document._video.setAttribute("poster", videos[n][0]);
    mp4.setAttribute("src", videos[n][1]);
    document._video.load();
    document._video.play();

I tried this command, this also didn't work.

    $('video').attr('loop','loop');
}

Thanks!

Upvotes: 2

Views: 1360

Answers (2)

zer00ne
zer00ne

Reputation: 43880

Update

The key to making a series of video loop is to add your loop logic to the ended event.

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>vidArray</title>
</head>

<body>
  <video id="vid" src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" controls width="480" height="auto">
    Your browser sux, why haven't you upgraded to Chrome or Firefox? Do you live in a cave?
  </video>

  <script>
    var poster = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.png"]
    var videos = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4"]
    var vid = document.getElementById("vid");
    var n = videos.length;
    var cnt = 0;

    function playVideo(x) {

      var png = poster[x];
      console.log('poster: ' + png);
      var mp4 = videos[x];
      console.log('video: ' + mp4);
      vid.setAttribute('poster', png);
      vid.src = mp4;
      vid.load();
      vid.play();
    }

    vid.addEventListener('ended', next, false);


    function next() {
      cnt++;
      if (cnt < n) {
        playVideo(cnt);
      } else {
        cnt = 0;
        playVideo(cnt);
      }
    }
  </script>
</body>

</html>

I separated the arrays, it works. Added a button to cycle through the videos.

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>vidArray</title>
</head>

<body>
  <video id="vid" src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" loop controls width="480" height="auto">
    Your browser sux, why haven't you upgraded to Chrome or Firefox? Do you live in a cave?
  </video>

  <button id="btn1">Next</button>
  <script>
    var poster = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.png"]
    var videos = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4"]

    var n = videos.length;
    var cnt = 0;

    function switchVideo(n) {
      var vid = document.getElementById("vid");
      var png = poster[n];
      console.log('poster: ' + png);
      var mp4 = videos[n];
      console.log('video: ' + mp4);
      vid.setAttribute('poster', png);
      vid.src = mp4;
      vid.load();
      vid.play();
    }

    var btn1 = document.getElementById("btn1");
    btn1.addEventListener('click', function(e) {
      cnt++;
      if (cnt < n) {
        switchVideo(cnt);
      } else {
        cnt = 0;
        switchVideo(cnt);
      }
    }, false);
  </script>
</body>

</html>

Upvotes: 1

Brett DeWoody
Brett DeWoody

Reputation: 62773

I think you're looking for:

$('video').attr('loop','loop');

Upvotes: 1

Related Questions