Question

我使用videojs播放背景循环视频。

但是当它结束时，它会重新加载视频约0.2秒

如何无延迟播放循环视频？

＆＃13;

<script src="http://vjs.zencdn.net/4.11/video.js"></script>
<link href="http://vjs.zencdn.net/4.11/video-js.css" rel="stylesheet"/>
<video id="video_page" class="video-js vjs-default-skin" loop autoplay width="683" height="384" preload="auto" data-setup='{}'>
  <source src="http://navademo.com/akva-group/uploads/videos/page_2_loop.ogv" type='video/ogg'>
</video>

＆＃13;

Answer 1

不确定，但我认为这是因为你在代码中使用了更多旧式的html和样式？如果我没有弄错的话，HTML5和CSS3就是你想要的方法。您想要实现的主要目的是尽可能将CSS和HTML保持分开。这对我有用，但如果你发现自己陷入困境，这就是我用作参考指南：http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

enter image description here

我使用了这个smooth-scroll.js文件并将其放在我通常放入jQuery文件的目录中。

$(function () {
  $('a[href*="#"]:not([href="#"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 100
        }, 1000);
        return false;
      }
    }
  });
});

如果您使用我刚才提到的jQuery文件，那么HTML就是这样的。

<script async="" src="js/smooth-scroll.js"></script>

  <video preload="auto" autoplay="" loop="" muted="">
 <source src="http://navademo.com/akva-group/uploads/videos/page_2_loop.ogv">
  </video>

不应将属性或样式媒体直接设置为HTML。此时你需要CSS。

  background: url(../images/terminal.jpg)
  no-repeat center center fixed;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Answer 2

步骤1.找到jquery库，这些库将执行您希望在屏幕上看到的内容。

可以在此处找到jQuery文件：https://github.com/VodkaBears/Vide

只需克隆并安装即可。完成后，您只需将视频，图像和jQuery文件放在您选择的任何路径中即可。只需确保在编写语法时指定正确的路径，您应该有一个工作站点，在后台循环播放视频，没有任何打嗝。

步骤2.编辑CSS文件，使其与您尝试在图片上放置的任何文字不冲突

现在，既然您要在HTML中定义视频文件的参数（只有我看到这样做没有任何问题），实际上与CSS文件无关。但是，如果要在视频上放置任何文本，则必须定义它。即使您无法看到背景，这也会为文本提供放置位置的参考点。

#home {
    background:url("") no-repeat center center fixed;
    display: table;
    height: 100%;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<script src="js/jquery.vide.js"></script>

<div id=                "block2"
     style=             "width: 100%; height: 100%;"

     data-vide-bg=      "mp4: path/to/file, 
                         webm: path/to/file, 
                         ogv: path/to/file, 
                         poster: path/to/file" 

     data-vide-options= "position: 0% 100%">
</div>

videojs：播放循环视频而无需重新加载

2 个答案: