HTML 5 Видео "автовоспроизведение" автоматически не запускается в CHROME

У меня есть следующий код:

<video controls autoplay>
  <source src="video/myVideo.mp4" type="video/mp4"> 
  <source src="video/myVideo.webm" type="video/webm">
  <source src="video/myVideo.ogv" type="video/ogg">   </video>

Видео:

  1. хорошо отображает как Chrome, так и Firefox
  2. В Firefox он играет так, как ожидалось
  3. В Chrome отображается, но не "автозапуск". Это проблема.
  4. Если я нажму на него (в Chrome), он будет играть нормально

Пытался

<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>

Ничего не работало в Chrome

Затем я также попытался изменить кодек, как рекомендовано в https://en.wikipedia.org/wiki/HTML5_video, но он также не работал:

<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

Так что теперь я в тупике. Спасибо за любые указатели! Очень признателен.

ОТВЕТЫ

Ответ 1

Вам нужно добавить playsinline autoplay muted loop, chrome не разрешает автозапуск видео, если он не отключен, также прямо сейчас я не знаю, почему он не работает на всех устройствах Android, im пытается посмотреть, зависит ли это от версии, If Я нашел кое-что, что я вам сообщу

Проблема с Chrome: после некоторых исследований я обнаружил, что он иногда не работает на хроме, потому что в ответном режиме вы можете активировать функцию сохранения данных и блокировать любое видео для автозапуска

Ответ 2

Я просто читал эту статью, и она говорит:

Важно: порядок видео файлов имеет жизненно важное значение; В настоящее время в Chrome есть ошибка, из-за которой он не может автоматически воспроизводить видео .webm, если оно идет после чего-либо еще.

Таким образом, похоже, что ваша проблема будет решена, если вы поместите .webm первым в свой список источников. Надеюсь, это поможет.

Ответ 4

Попробуйте это, когда я попытался дать приглушенный, проверьте это демо в Codpen

    <video width="320" height="240" controls autoplay muted id="videoId">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

скрипт

function toggleMute() {

  var video=document.getElementById("videoId");

  if(video.muted){
    video.muted = false;
  } else {
    debugger;
    video.muted = true;
    video.play()
  }

}

$(document).ready(function(){
  setTimeout(toggleMute,3000);
})

отредактированный атрибут содержимого

autoplay muted playsinline

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Ответ 5

Этот вопрос подробно описан здесь
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

TL; DR Вы по-прежнему всегда можете отключать muted видео

Кроме того, если вы хотите автовоспроизвести видео на iOS, добавьте атрибут playsInline, потому что по умолчанию iOS пытается просмотреть полноэкранные видео
https://webkit.org/blog/6784/new-video-policies-for-ios/

Ответ 6

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

<video src="{{ asset('path/to/your_video.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;
  }
});

Ответ 7

Extremeandy упоминает, что видеоролик Chrome 66 отключен.

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

Надеюсь, это тоже поможет другим.

Ответ 8

Это те атрибуты, которые я использовал, чтобы заставить его работать на меня.

<video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video>