MP4 视频无法在移动设备和 Chrome 上播放？

Question

下面的代码在桌面 Safari 浏览器上播放 .mp4（编解码器：H.264，AAC，种类：MPEG-4 电影，通过 Quicktime 创建）文件就好了：

<video poster="video poster link" controls="controls" width="270" height="490"> <source src="video link" type="video/mp4"></video>

但是，在 iPhone/iPad Safari 浏览器上尝试时，点击播放后没有任何反应。此外，Chrome 浏览器不播放视频，中间的播放按钮不显示。

网站是 WordPress 网站并且在线。

感谢您的帮助。

编辑：

我尝试通过添加muted autoplay playsinline loop 来解决它，但除了 Safari 桌面之外，它们似乎都不起作用。

我将 .mp4 文件转换为 .webm 和 .ogv 并没有工作。

在 Chrome 浏览器上，控件显示为灰色/禁用，视频未加载。海报可见。

在移动设备上，Chrome/Safari 控件进行交互，但视频无法播放。

我不需要自动播放或预加载此视频。我只需要在按下播放时播放它。很简单。

Answer 1

<video id="my_video" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video

代码看起来不错。 您可以尝试验证浏览器是否可以播放该格式。

<p>Can my browser play MP4 videos? <span>
<button onclick="supportType(event,'video/mp4','avc1.42E01E, mp4a.40.2')" type="button">Test</button>
</span></p>
<script> 
function supportType(e,vidType,codType) { 
  var vid = document.createElement('video');
  isSupp = vid.canPlayType(vidType+';codecs="'+codType+'"');
  if (isSupp == "") {
    isSupp = "No";
  }
  e.target.parentNode.innerHTML = "Answer: " + isSupp;
} 
</script>

Answer 2

事实证明，问题不在于代码，而在于我在网站构建器中使用了哪个自定义 HTML 小部件。

我一直在 WordPress 中使用 Astra 主题，在将自定义 HTML 小部件添加到布局中时，我使用的是 WordPress HTML 小部件而不是 Astra 的 HTML 小部件。不知何故，主题阻止了 WordPress 小部件。

我将把这个答案留在这里，以防将来有人遇到同样的问题。

Answer 3

<video class="embed-responsive-item" width="320" height="240" autoplay loop>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  <source src="https://www.w3schools.com/html/movie.webm" type="video/webm">
</video>