Вопрос: Видео как фон на веб-сайте, играющем по команде


Я пытаюсь установить видео в качестве фона, у меня есть flv-файл и youtube-link. Поместить его на мой сайт не так сложно с html5 видео-тегом или jquery, но я не могу найти, как я могу поместить его на свой сайт, но не автоматически запускать. У меня есть полупрозрачный прямоугольник, где текст наступит. Поэтому моя идея заключалась в создании кнопки или ссылки, чтобы текст и прямоугольник исчезали и позволяли воспроизводить видео.

Кто-нибудь знает хороший плагин или скрипт, чтобы сделать это, или кто-то может столкнуться в правильном направлении.

Greetz


4


источник


Ответы:


Вы можете сделать это с помощью собственного видеопроигрывателя html5, который будет намного быстрее, не нужно использовать плагин. Попробуй это:

Вот пример jsFiddle.

JQuery:

$(document).ready(function() {
    var windowH =  $(window).height();
    $('#main_container, #overlay').height(windowH);
    $(window).resize(function () {
        var windowH =  $(window).height();
        $('#main_container, #overlay').height(windowH);
    });
});​

CSS:

body { background-color: #000000; font-family: Arial; font-size: 12px;
       color: #000; margin: 0; padding: 0; overflow: hidden; }
#main_container { float: left; position: relative; width: 100%; height: 100%; 
                  background-color: #000000; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }​
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

HTML:

<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</div>

Примечание. Используется оверлейный div для деактивации элементов управления, и вы можете использовать любой контент на своем видео, например, в примере jsFiddle.


4



Если вы хотите сценарий, вы можете попробовать: https://github.com/sydlawrence/jquery.videoBG

В документации здесь: http://syddev.com/jquery.videoBG/index.html#documentation , кажется, есть опция автоматического воспроизведения с параметром Boolean ... поэтому я предполагаю, что просто установите его на false

Автовоспроизведение     BOOL


0