Как сделать так, чтобы видео автоматически воспроизводилось в каждом браузере?

Question

Мне нужно воспроизвести видео (автоматическое воспроизведение) независимо от любого браузера или устройства.Ниже код отлично работает в десктопах (Chrome, Opera, Firefox и Safari);но в мобильных телефонах это не загружается в iPhone (показывает элементы управления) и в некоторых телефонах Android (даже не элементы управления)

Я пытался добавить атрибуты autoplay с muted и playsinline, также пыталсязаставить играть с JavaScript.

Вот HTML:

<video autoplay playsinline loop muted poster="about-poster.png">
  <source
    src="about-video.mp4"
    type="video/mp4"
  />
  <p>
    Your browser doesn't support HTML5 video. You can find our
    logo video
    <a href="about-video.mp4">here</a> instead.
  </p>
</video>

Это код JavaScript:

window.addEventListener("DOMContentLoaded", function() {
  var media = document.querySelector("video");

  if (media.paused) {
    media.play();
  } else {
    media.play();
  }
});

Я хочу автоматически воспроизводить видео в любом браузереи все устройства, и я мог бы использовать некоторую помощь.

Спасибо.

Answer 1

playsinline атрибут отсутствует

video {
max-width: 100%;
}

<video _ngcontent-c15="" autoplay loop muted playsinline preload="auto" poster="https://picsum.photos/360/240?image=990">
  <source _ngcontent-c15="" media="screen and (min-device-width: 721px)" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_1280x720_1mb.mp4" type="video/mp4">
  <source _ngcontent-c15="" media="screen and (max-device-width: 720px)" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_720x480_1mb.mp4" type="video/mp4">
  <source _ngcontent-c15="" media="screen and (max-device-width: 640px)" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_360x240_1mb.mp4" type="video/mp4">
  <source _ngcontent-c15="" media="screen" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_360x240_1mb.mp4" type="video/mp4">
</video>