Автовоспроизведение видео не работает в браузерах Safari и Chrome для ПК.

Я потратил довольно много времени, пытаясь понять, почему видео встроено вот так:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

начинает воспроизведение автоматически после загрузки страницы в FireFox, но не может выполнять автовоспроизведение в браузерах на основе Webkit. Это происходило только на некоторых случайных страницах. Причину найти пока не удалось. Я подозреваю, что какие-то незакрытые теги или обширный JS, созданный редакторами CMS.

Лучшее исправление, которое я мог получить, - это добавить этот код сразу после </video>

<script>
    document.getElementById('vid').play();
</script>

... не красиво, но как-то работает.

ОБНОВЛЕНИЕ В последнее время многие браузеры могут автоматически воспроизводить видео только с выключенным звуком, поэтому вам также нужно добавить mutedатрибут в тег видео.

<video autoplay muted>
...
</video>

После использования jQuery play()или манипуляции с DOM, как было предложено другими ответами, он все еще не работал (видео не воспроизводилось автоматически) в Chrome для Android (версия 56.0).

Согласно этому сообщению на developers.google.com , начиная с Chrome 53, опция автовоспроизведения учитывается браузером, если видео отключено .

Таким образом, использование autoplay mutedатрибутов в теге видео позволяет автоматически воспроизводить видео в браузерах Chrome, начиная с версии 53.

Выдержка из приведенной выше ссылки:

Отключенное автовоспроизведение видео поддерживается Chrome для Android начиная с версии 53. Воспроизведение начнется автоматически для видеоэлемента, как только он появится в поле зрения, если оба параметра autoplayи mutedустановлены [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• Отключенное автовоспроизведение поддерживается Safari на iOS 10 и новее.
• Автовоспроизведение, без звука или без звука, уже поддерживается на Android браузером Firefox и UC: они не блокируют никакого автовоспроизведения.

Бывает, что Safari и Chrome на рабочем столе не любят манипуляции с DOM вокруг тега видео. Они не будут активировать порядок воспроизведения, если установлен атрибут autoplay, даже если событие canplaythrough сработало, когда DOM вокруг тега видео изменился после начальной загрузки страницы. В основном у меня была такая же проблема, пока я не удалил jQuery .wrap () вокруг тега видео, и после этого он автоматически воспроизводился, как ожидалось.

Google только что изменил свою политику в отношении автовоспроизведения видео, она должна быть muted

Вы можете проверить здесь

так что просто добавь приглушенный

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Для меня проблема заключалась в том, что mutedатрибут нужно было добавить в videoтег. То есть:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

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

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

У меня такая же проблема с моим видео.

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

После поиска я нашел решение:

Если я установил для атрибутов preload значение true, видео запускается нормально.

Добавление приведенного ниже кода внизу страницы сработало для меня. Не знаю, почему это работает :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Попробуй это:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

var video = document.querySelector('video'); video.muted = true; video.play()

Только это решение мне помогло, <video autoplay muted ...>...</video>не сработало ...

Ни один из других ответов не помог мне. Мое обходное решение состояло в том, чтобы щелкнуть само видео; хакерский (из-за необходимого тайм-аута), но он отлично работает:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Недавно мы решили аналогичную проблему со встроенным видео и обнаружили, что атрибутов автовоспроизведения и отключения звука недостаточно для нашей реализации.

Мы добавили в код третий атрибут playsinline, и он устранил проблему для пользователей iOS.

Это исправление относится к видео, которые должны воспроизводиться в режиме онлайн. Из https://webkit.org/blog/6784/new-video-policies-for-ios/ :

На iPhone теперь элементы будут воспроизводиться в режиме онлайн и не будут автоматически переходить в полноэкранный режим при запуске воспроизведения. Элементы без атрибутов playsinline по-прежнему будут требовать полноэкранного режима для воспроизведения на iPhone. При выходе из полноэкранного режима с помощью жеста сжатия элементы без воспроизведения в интерактивном режиме будут продолжать воспроизводиться встроенно.

Google обновил Политику автозапуска. Автовоспроизведение работает только в режиме без звука. Проверьте ссылку https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Попробуй это:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

Вот как я обычно это делаю. цикл, элементы управления и автовоспроизведение не требуют значения, они являются логическими атрибутами.

Это связано с тем, что теперь Chrome предотвращает автоматическое воспроизведение в видео html5, поэтому по умолчанию они не разрешают автоматическое воспроизведение. поэтому мы можем изменить эти настройки, используя настройки флага Chrome. это невозможно в обычном случае, поэтому я нашел другое решение. это работает отлично ... (добавить preload = "auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

Провел два часа, пробуя все решения, упомянутые выше.

Вот что наконец сработало для меня:

var vid = document.getElementById("myVideo");
vid.muted = true;

На Safari Iphone, когда уровень масла низкий и iphone находится в режиме низкого энергопотребления, он не будет автоматически воспроизводиться, даже если у вас есть следующие атрибуты: автовоспроизведение, зацикливание, отключение звука, воспроизведение, встроенное в ваш HTML-тег видео.

Прогулка, я обнаружил, что работает, чтобы событие жеста пользователя запускало воспроизведение видео:

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

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

https://webkit.org/blog/6784/new-video-policies-for-ios/

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

Я начал с воспроизведения всех видимых видео, но старые телефоны не работали хорошо. Итак, прямо сейчас я проигрываю одно видео, которое находится ближе всего к центру окна, а остальные ставлю на паузу. Ванильный JS. Вы можете выбрать, какой алгоритм вы предпочитаете.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

Я решил ту же проблему с,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

Вы должны запускать видео после того, как страница была показана.

Попробуйте заменить autoPlayна autoplay.

Иногда это кажется чувствительным к регистру. Очень странно, потому что это сработало, как и autoplayу меня, но только если я включилcontrols