即时加载视频

时间:2015-03-25 22:36:25

标签: javascript html5 video

我在网络编程方面相对较新,因此在保持代码清洁方面存在问题。在最后一个项目上工作,除其他事项外,我必须做以下事情:

  1. 在主页上自动播放八个可用视频中的一个(例如,main-vid-3.webm);
  2. 当它结束时,开始播放下一个(在这种情况下,main-vid-4.webm);
  3. 然后播放下一个视频,依此类推。在第八个视频之后,必须播放main-vid-1。
  4. 如果我在上一个视频结束后立即开始播放下一个视频,则因为尚未加载新视频而导致延迟。我对问题的解决方案:

    1. 页面上有两个视频标签,其中一个有display:none;
    2. 当带有display:block的视频结束时,它会隐藏,而另一个视频出现并开始播放;
    3. 播放该视频时,隐藏视频的来源会随JS更改并开始加载(但尚未播放);
    4. 重复步骤2;
    5. 它有效,但是我的代码(尤其是JS部分以及在页面上有两个视频标签的必要性)对我来说似乎并不干净。有没有更好的解决方案?

      <section id="main-page-top">
      		<video id="bgvid-<?php echo $vidId; ?>" autoplay width="100%">
      			<source src="<?php echo get_template_directory_uri(); ?>/inc/main-vid-<?php echo $vidId; ?>.webm" type="video/webm">
      		</video>
      		<video id="bgvid-<?php echo ($vidId + 1); ?>" class="hidden" width="100%">
      			<source src="<?php echo get_template_directory_uri(); ?>/inc/main-vid-<?php echo $vidIdAlt; ?>.webm" type="video/webm">
      		</video>
      </section>

      document.getElementById('#main-page-top video:nth-child(1)').addEventListener('ended', function() {
        document.getElementById('#main-page-top video:nth-child(1)').style.display = "none";
        document.getElementById('#main-page-top video:nth-child(2)').style.display = "block";
        document.getElementById('#main-page-top video:nth-child(2)').play();
        var vidNum = parseInt(document.getElementById('#main-page-top video:nth-child(1)').id.substring(6));
        if (vidNum === 7) {
          vidNum = -1;
        } else if (vidNum === 8) {
          vidNum = 0;
        }
        document.getElementById('#main-page-top video:nth-child(1)').setAttribute('id', 'bgvid-' + (vidNum + 2));
        document.getElementById('#main-page-top video:nth-child(1) source').setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm');
        document.getElementById('#main-page-top video:nth-child(1)').setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg");
        document.getElementById('#main-page-top video:nth-child(1)').load();
        document.getElementById('#main-page-top video:nth-child(1)').pause();
      });
      
      document.getElementById('#main-page-top video:nth-child(2)').addEventListener('ended', function() {
        document.getElementById('#main-page-top video:nth-child(2)').style.display = "none";
        document.getElementById('#main-page-top video:nth-child(1)').style.display = "block";
        document.getElementById('#main-page-top video:nth-child(1)').play();
        var vidNum = parseInt(document.getElementById('#main-page-top video:nth-child(2)').id.substring(6));
        if (vidNum === 7) {
          vidNum = -1;
        } else if (vidNum === 8) {
          vidNum = 0;
        }
        document.getElementById('#main-page-top video:nth-child(2)').setAttribute('id', 'bgvid-' + (vidNum + 2));
        document.getElementById('#main-page-top video:nth-child(2) source').setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm');
        document.getElementById('#main-page-top video:nth-child(2)').setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg");
        document.getElementById('#main-page-top video:nth-child(2)').load();
        document.getElementById('#main-page-top video:nth-child(2)').pause();
      });

1 个答案:

答案 0 :(得分:0)

谢谢你们。我无法找到能否将您的评论标记为正确答案。

现在代码看起来像这样(添加了淡入/淡出功能):

&#13;
&#13;
var vidFading = function(p1, p2) {
    $(p1).on('timeupdate', function(event) {
        var current = Math.round(event.target.currentTime * 1000);
        var total = Math.round(event.target.duration * 1000);

        if ((total - current) < 500) {
            $(this).fadeOut("slow");
            $(p2).fadeIn(1000);
        }
    });
}
var vidFoo = function(p1, p2) {
    var x = document.querySelector(p1);
    var x1 = document.querySelector(p1 + ' source')
    var y = document.querySelector(p2);
    y.play();
    var vidNum = parseInt(document.querySelector(p1).id.substring(6));
    if (vidNum === 7) {
        vidNum = -1;
    } else if (vidNum === 8) {
        vidNum = 0;
    }
    x.setAttribute('id', 'bgvid-' + (vidNum + 2));
    x1.setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm');
    x.setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg");
    x.load();
    x.pause();
}


if (document.getElementById('main-page')) {

    vidFading('#main-page-vid video:nth-child(1)', '#main-page-vid video:nth-child(2)');
    vidFading('#main-page-vid video:nth-child(2)', '#main-page-vid video:nth-child(1)');

    document.querySelector('#main-page-vid video:nth-child(1)').addEventListener('ended', function() {
        vidFoo('#main-page-vid video:nth-child(1)', '#main-page-vid video:nth-child(2)');
    });

    document.querySelector('#main-page-vid video:nth-child(2)').addEventListener('ended', function() {
        vidFoo('#main-page-vid video:nth-child(2)', '#main-page-vid video:nth-child(1)');
    });
}
&#13;
&#13;
&#13;