Question

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

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

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

3 个答案: