videojs: воспроизведение видео цикла без повторной загрузки

Я использую videojs для воспроизведения видео в фоновой петле.videojs: воспроизведение видео цикла без повторной загрузки

Но когда это на закончилась, это перезагрузка видео о 0.2s

Как играть видео петли без задержки?

моя скрипка: 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>

источник

2015-08-11 Phuong Le

Не уверен, но я думаю, что это потому, что вы используете более старшего стиля HTML и стиля для кода? HTML5 и CSS3 - это то, как вы хотите приблизиться к этому, если я не ошибаюсь. Главное, что вы хотите достичь здесь, - это максимально упростить CSS и HTML. Это работает для меня, но если вы окажетесь застрял, это то, что я использовал в качестве справочного руководства: http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

enter image description here

я использовал этот гладколицый 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; 
     } 
    } 
    }); 
});

Вот что ваш HTML будет выглядеть, если вы должны были использовать файл JQuery, который я только что упомянул.

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

источник

2016-08-04 17:48:39

Шаг 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>

источник

2016-08-04 22:55:45

videojs: воспроизведение видео цикла без повторной загрузки

ответ

Смежные вопросы