Функция автозапуска видео HTML5 не работает в fullpage.Яш

мой HTML5 Видео автозапуск не работает. 

<video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo">

Я также пробовал без значения = "true", и это тоже не работает. Я уже использовал тот же код на других сайтах, и он работал нормально.

Я использую фреймворк на основе fullPage.JS, но я искал что-то связанное с файлами и ничего не нашел.

сайт находится на http://agenciamilk.com/site/2/ Если вы хотите взглянуть. Спасибо

6
fullpage.js html5 html5-video javascript

5 ответов

вы должны использовать afterRender обратный вызов fullpage.плагин JS предлагает.

afterRender()
Этот обратный вызов запускается сразу после создания структуры страницы. Это обратный вызов, который вы хотите использовать для инициализации других плагинов или запуска любого кода, который требует, чтобы документ был готов (поскольку этот плагин изменяет DOM для создания результирующей структуры).

вы можете взглянуть на живой пример здесь или вы даже можете найти его в примеры из fullpage.скачать JS.

и вы можете легко увидеть исходный код его использования:

$(document).ready(function () {
    $('#fullpage').fullpage({
        verticalCentered: true,
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        afterRender: function () {

            //playing the video
            $('video').get(0).play();
        }
    });
});

обновление

Это больше не нужно в fullpage.js > 2.6.6. Он будет автоматически воспроизводить видео при обращении к разделу насколько он имеет тег autoplay в:

<video autoplay loop muted controls="false" id="myVideo">
    <source src="imgs/flowers.mp4" type="video/mp4">
    <source src="imgs/flowers.webm" type="video/webm">
</video>

если вы хотите воспроизвести его только при загрузке раздела (не при загрузке страницы), Используйте data-autoplay. Подробнее документацию.

9

попробовать autoplay="autoplay"

http://www.w3schools.com/tags/att_video_autoplay.asp

упоминает здесь в разделе" различия между HTML и XHTML".

1

Извините, у меня недостаточно репутации, чтобы просто прокомментировать. Ты пытался:

autoplay="autoplay"

?

1

можно использовать "isInViewport" плагин (ссылка ниже), чтобы узнать, какое видео в настоящее время находится в окне просмотра и выполнить некоторый код js соответственно.

$(function () {
    $('#fullpage').fullpage({
        verticalCentered: true,
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        afterRender: function () {
            $('video').each(function () {
                if ($(this).is(":in-viewport")) {
                    $(this)[0].play();
                }
            }
    });
});

голый в виду, что петля через каждый video element не самый эффективный метод для использования, но этого должно быть достаточно, чтобы вы начали.

плагин jQuery: isInViewport

1

или вы можете просто использовать autoplay собственность, что-то вроде

<video preload="auto" autoplay loop="loop" muted="muted" volume="0" id="myVideo">
//----use just this one---^
0