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>

如何在每个浏览器中自动播放视频？

1 个答案: