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>