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

Question

我正在使用videojs播放一个背景循环视频。

但是当它播放结束时，大约需要0.2秒才能重新加载视频。

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

我的代码示例：http://jsfiddle.net/wdaLq8pk/

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

- Phuong Le

Answer 1

不确定，但我认为这是因为你在使用更旧的HTML和代码样式？如果我没记错的话，HTML5和CSS3是你想要采用的方法。你想要实现的主要目标是尽可能地将CSS和HTML分开。这对我有用，但如果你发现自己卡住了，这就是我用作参考指南的内容：http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video 输入图像描述

1. I used this smooth-scroll.js file and put it in the directory where I usually put in my jQuery files.

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

- Ryan Santos

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>

- Ryan Santos