Автоматичне відтворення відео не працює у веб-переглядачі 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>

Після використання play()маніпуляції jQuery або 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 Browser: вони не блокують жодного виду автовідтворення.

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

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>

Після пошуку я знайшов рішення:

Якщо я встановив атрибути "попереднього завантаження" на "справжнє", відео починається нормально

Додавання наведеного нижче коду внизу сторінки працювало для мене. Я не знаю, чому це працює :(

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

Нещодавно ми вирішили подібну проблему із вбудованим відео та виявили, що автовідтворення та відключені атрибути недостатньо для нашої реалізації.

До коду ми додали третій атрибут "playinline", який вирішив проблему для користувачів iOS.

Це виправлення є специфічним для відео, які слід відтворювати в режимі прямого відео. З https://webkit.org/blog/6784/new-video-policies-for-ios/ :

На iPhone тепер елементам буде дозволено грати в режимі Inline, і вони автоматично не перейдуть на режим повноекранного режиму, коли розпочнеться відтворення. Елементи без атрибутів playinline продовжуватимуть вимагати режиму повноекранного режиму для відтворення на 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>

Це я нормально роблю. цикл, елементи керування та автоматична гра не вимагають значення, яке вони булеві атрибути.

Це тому, що зараз хром перешкоджає автоматичному відтворенню у форматі html5, тому за замовчуванням вони не дозволять автоматичну програвати. тож ми можемо змінити ці налаштування за допомогою налаштувань хромованого прапора. це неможливо для нормального випадку, тому я маю знайти інше рішення. це працює ідеально ... (додати 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;

На сафарі 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 на веб-сайті:

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