更新

Question

我正在运行播放视频阵列的数组，但突然结束并且没有循环播放。当然我尝试了HTML视频属性循环和loop =＆＃34; true＆＃34;和loop =＆＃34;循环＆＃34; ......没有用......

我只想在晚上循环：

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();

我尝试过这个命令，这也没有用。

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

谢谢！

Answer 1

我认为您正在寻找：

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

Answer 2

更新

制作一系列视频循环的关键是将循环逻辑添加到ended事件中。

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

我分离了数组，它有效。添加了一个循环浏览视频的按钮。

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

试图循环HTML5视频数组

2 个答案:

更新