MP4视频无法在移动设备和Chrome上播放？
MP4视频无法在移动设备和Chrome上播放？
提问于 2019-06-03 12:40:39
下面的代码是在桌面Safari浏览器上很好地播放.mp4 (编解码器: H.264，AAC，Kind: 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可以控制交互，但不能播放视频。
我不需要这个视频是自动播放或预加载。我只需要在按下播放时播放它。非常简单。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-06-06 15:33:39
事实证明，问题不在于代码，而在于我在网站构建器中使用了哪个自定义HTML小部件。
我一直在使用WordPress中的Astra主题，当添加自定义超文本标记语言小部件到布局中时，我使用的是WordPress超文本标记语言小部件，而不是阿斯特拉的超文本标记语言小部件。不知何故，主题阻塞了WordPress小部件。
我将在这里留下这个答案，以防将来有人会遇到同样的问题。
Stack Overflow用户
发布于 2019-06-06 00:45:28
<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>
Stack Overflow用户
发布于 2019-06-03 14:23:58
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56421231
复制相关文章
相似问题