自动播放不起作用时的后备图像答案

【问题标题】：Fallback image when autoplay doesn't work自动播放不起作用时的后备图像
【发布时间】：2022-01-24 19:09:39
【问题描述】：

我正在使用 React 和 Gatsby 开发我的作品集，并且我正在使用视频来创建动画阴影。视频处于自动播放状态，使用 autoplay、muted 和 playsinline 标签可以正常播放。但是，当低功耗模式打开时，动画不会在 Safari 上播放。

Animation playing (low power mode off)

Animation not playing (low power mode on)

我知道 Apple 会阻止视频以节省电池，但正如我在他们的网站上看到的，特别是在他们的 Pro Display XDR (https://www.apple.com/pro-display-xdr/) 上，当视频无法播放时，他们会使用备用图像。我想知道用 React 做同样事情的最好方法是什么？

谢谢，托马斯

【问题讨论】：

标签： javascript html safari autoplay

【解决方案1】：

您可以在视频标签中使用poster 属性。

<video width="250" height="250" playsinline autoplay muted loop poster="https://via.placeholder.com/250&text=I%20am%20Poster">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
            type="video/webm">
    Sorry, your browser doesn't support embedded videos.
</video>

没有来源或失败的视频：

<video playsinline autoplay muted loop width="250" height="250" poster="https://via.placeholder.com/250&text=I%20am%20Poster">
    <source src="#"
            type="video/webm">
    Sorry, your browser doesn't support embedded videos.
</video>

【讨论】：

您好！感谢您的反馈意见！我已经尝试过海报方法，但我正在寻找其他方法，因为它仍然会加载视频（它显示播放按钮）。我希望它是这样的：如果低功耗模式 = true 然后图像其他视频