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 来解决它，但其中 none 似乎在 Safari 桌面以外的地方工作。

我将 .mp4 文件转换为 .webm 和 .ogv 但没有成功。

在 Chrome 浏览器上，控件看起来像 greyed/disabled，视频未加载。海报可见。

在移动设备上Chrome/Safari控制交互但视频不播放。

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

Answer 1

<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>

Answer 2

<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 3

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

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

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

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

MP4 Video is not playing on Mobile Devices and Chrome?

html

wordpress

google-chrome

video-streaming

html5-video