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

【问题标题】：How would I make video auto play in every browser?如何让视频在每个浏览器中自动播放？
【发布时间】：2019-08-26 06:54:19
【问题描述】：

无论使用任何浏览器或设备，我都需要播放视频（自动播放）。下面的代码在桌面（Chrome、Opera、Firefox 和 Safari）中运行良好；但是，在手机中，它没有加载到 iPhone（显示控件）和某些 android 手机（甚至没有控件）中

我尝试使用muted 和playsinline 添加属性autoplay，还尝试强制使用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();
  }
});

我想在每个浏览器和每个设备上自动播放视频，我需要一些帮助。

谢谢。

【问题讨论】：

HTML5 Video autoplay on iPhone的可能重复
仅供参考，你不能。我在我拥有的每台浏览器、每台设备上都关闭了自动播放功能。我个人觉得没有什么比自动播放视频更烦人的了。尽管互联网上充斥着自动播放广告等，但我从未见过它们（事实上，我看到的广告很少，因为我拥有的每个浏览器/设备上都有广告拦截器）。除此之外，通常的自动播放或 onLoad 处理程序似乎是首选方法。我过去做过很多广告工作，我们通常都是这样做的。
一般只有在视频静音的情况下才有可能
浏览器也开始自动静音声音媒体，直到用户与之交互
我试过playsinline属性。这没有帮助。 @TecBrat

标签： javascript html dom

【解决方案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>

【讨论】：

@DebadiptiPatra 在哪里？我在您的代码中没有看到它。
我已经在本地尝试了 playsinline 。问题仅发生在我拥有的一台 android 设备（带有 android 版本 6.0 的 Oneplus One）和 iPhone 7（Chrome 和 Safari）上。所有其他设备都可以正常播放。
@DebadiptiPatra 为什么你的问题中没有这些信息？
一加一智能手机的浏览器是什么？
带 Safari 的 iPhone 7 与 playinline 一起工作（在 CrossBrwoserTesting 上使用此代码笔测试：codepen.io/HerrSerker/pen/ROawbm）