Автоматическое воспроизведение видео не работает в браузере Safari и Chrome

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

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

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

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

• Приглушенный автозапуск поддерживается Safari на iOS 10 и более поздних версиях.
• Firefox и UC Browser уже поддерживают автозапуск, независимо от того, отключен он или нет, - он не блокирует автозапуск.

Ответ 3

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

Ответ 4

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

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

Ответ 5

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>

Ответ 6

Я только что получил ту же самую проблему с моим видео

<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", начало видео обычно

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

Это связано с тем, что в настоящее время Chrome запрещает автоматическое воспроизведение видео html5, поэтому по умолчанию они не разрешают автоматическое воспроизведение. так что мы можем изменить эти настройки, используя настройки флага Chrome. это невозможно для нормального случая, поэтому я должен найти другое решение. это работает отлично... (add 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();  

Ответ 12

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

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

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

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

Ответ 13

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

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

Ответ 14

Попробуйте следующее:

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

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

Ответ 15

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

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

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

Ответ 16

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

Ответ 17

Я начал играть со всеми видимыми видео, но старые телефоны плохо работали. Поэтому прямо сейчас я воспроизвожу одно видео, которое ближе всего к центру окна, и останавливает остальных. Vanilla 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();
}

Ответ 18

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

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

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

Ответ 19

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

<video src="{{ asset('assets/vid/accelerator_landing.mp4' )}}" muted autoplay loop playsinline></video>

И поместите это js после этого:

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});