视频未自动播放时隐藏播放按钮答案

【问题标题】：Hide play button when video is not autoplaying视频未自动播放时隐藏播放按钮
【发布时间】：2020-11-01 10:19:34
【问题描述】：

在我的网站上有一个应该自动播放的视频。它在大多数设备上都可以做到这一点，当然，除了 iPhone。我正在为视频使用 WordPress 封面小部件（和 WordPress beta 5.5）。

当它不在 iPhone 上自动播放时，它会显示一个不可点击的播放按钮： Image

我怎样才能让这个播放按钮消失，以便至少显示一个静态图像？

谢谢！

【问题讨论】：

【解决方案1】：

如果您知道如何在js(javascript) 中编码或知道有人会这样做，您可以删除播放按钮图标，甚至可以删除 iPhone 上的 autoplay 视频。

有一个方便的 npm 包可以帮助它被称为 react-player https://www.npmjs.com/package/react-player

它与 vanillajs 一起工作，以查看主页上示例的小提琴 https://jsfiddle.net/o62snj3p/

【讨论】：

我正在使用 Wordpress。虽然我可以添加一些 javascript，但我不知道是否应该为我的网站使用像 react 这样的整个库。此外，该视频只是一个简单的具有视觉吸引力的背景视频（英雄视频），视频托管在我自己的服务器上
你可以使用 WordPress 作为 Headless CMS 并使用 React 作为前端你必须做额外的配置来处理路由 Traversy Media 有一个很棒的视频教程来解释如何做到这一点youtube.com/watch?v=fFNXWinbgro&t=1804s ，你可以使用 react-player 库而不需要像 React 这样的库查看我在 vanillajs 中所做的 jsfiddle jsfiddle.net/o62snj3p

【解决方案2】：

你能展示你的代码吗？视频应该在所有浏览器上自动播放。对于移动设备，您需要添加 muted 属性。

【讨论】：

<div class="wp-block-cover has-background-dim-20 has-background-dim alignfull bigheader" style="background-color:#ff3852;min-height:700px"> <video class="wp-block-cover__video-background" autoplay="" muted="" loop="" playsinline="" src="[LINK]"></video><div class="wp-block-cover__inner-container"> <h1 class="has-text-align-center">Wir sind Performance TV!</h1> </div></div> 我听说 iPhone 处于省电模式是一个例外，无论你怎么做，你都无法让它发挥作用。不知何故，dcmn.com 仍然设法让它工作......