在海报加载之前强制播放视频答案

【问题标题】：Force video to play before poster loads在海报加载之前强制播放视频
【发布时间】：2019-07-08 07:23:21
【问题描述】：

在 Firefox 上，海报图像在视频开始之前完全加载。是否可以强制它首先使用纯 JS 或 jquery 播放视频？不管它是否停止缓冲，我只是不想先看到海报。

使用标准代码：

<video class="myvideo" width="500" height="700" poster="" autoplay muted>
  <source src="" type="video/webm">
</video>

超级简单的修复只需要一个 preload="none"

【问题讨论】：

什么海报？您从poster attribute 设置的图像？在这里您没有设置任何内容，因此您不应该看到它，并且考虑到您提出问题的方式，这听起来是正确的做法（不设置它）。
在海报属性中是的，我确实需要它用于不支持透明 webm 的浏览器。
所以您愿意“根据浏览器是否支持透明 webm 有条件地显示海报”？如果是这样问这个而不是“在加载海报之前强制播放视频”......在问这个之前，第一步显然是"Detect whether the browser supports webm with transparency"。
不，我总是愿意展示海报，但视频加载后/无法播放。
但是你的标记中有autoplay。因此，当视频加载了足够的数据来播放它时，它就会播放它（甚至在它实际加载之前）。从那里开始，您的海报将永远不会显示。

标签： javascript jquery html5-video

【解决方案1】：

您可以在视频加载后尝试通过 JavaScript 播放视频。为此，您必须为视频添加一个 ID。

<video id="myivdeo" class="myvideo" width="500" height="700" poster="" autoplay muted onload="javascript:this.play();">
    <source src="" type="video/webm">
</video>

~MarvMan

【讨论】：

我认为可能只是 onload="this.play();"

【解决方案2】：

只需要包含 preload="none"。

<video class="myvideo" width="500" height="700" autoplay muted preload="none" poster="" >
  <source src="" type="video/webm">
</video>

【讨论】：