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

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

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

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

谢谢!

【问题讨论】:

    标签: javascript html css wordpress video


    【解决方案1】:

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

    有用的资源 https://developer.mozilla.org/en-US/docs/Learn https://www.w3schools.com/js/default.asp

    有一个方便的 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 仍然设法让它工作......
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-26
    • 2016-07-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多