隐藏iPhone HTML5视频播放按钮

Question

我想要隐藏<video>元素上默认显示的大播放按钮

可能吗？

Answer 1

我没有任何便于测试的iOS设备,但也许试试这个:

video::-webkit-media-controls {
    display:none !important;
}

Answer 2

似乎苹果再次改变了影子.

要隐藏播放按钮控件,您必须使用以下CSS:

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

Answer 3

看看Safari iOS中的影子DOM告诉我你想要的东西(只隐藏大的中央播放按钮)是:

video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

伊恩的答案隐藏了一切,包括文字轨道(隐藏字幕......)

Answer 4

当设备处于“低功耗模式”时，较新的 iOS 版本会显示此类播放按钮。

Answer 5

在视频源文件中,您只需更改即可

controls= "false"

对于Safari CSS,ios上的本机浏览器,你也可以试试这个hacky技巧

.custom-video-controls {
  z-index: 2147483647;
}

这是关于管理/隐藏HTML 5视频控件的详细讨论的链接

http://css-tricks.com/custom-controls-in-html5-video-full-screen/

Answer 6

2021 年 10 月更新

对于 iOS 13、14 和 15，所有答案都已过时。这似乎是因为 iOS 低功耗模式autoplay默认情况下会阻止浏览器中的所有视频（以节省电量）。

删除烦人的播放按钮的最佳方法是删除autoplay任何视频元素上的标签，并在有任何用户交互时开始播放视频。

反应示例如下：

 <video ref={playerRef} playsInline >

let playVideo = (event) => {
   if (playerRef.current) {
      playerRef.current.play()
   }
}

旁注：播放按钮隐藏在 Shadow dom 中，我无法弄清楚如何通过外部 CSS 修改甚至 JS 来隐藏。如果有人对如何隐藏 Shadow dom 元素有任何想法，那么这将是一个更好的解决方案。

Answer 7

截至 2022 年 10 月 20 日，

我的解决方案是从视频元素中删除自动播放并在页面加载时使用 HTMLMediaElement.play() 。从 play() 返回的承诺将捕获播放视频的任何问题，否则视频将照常播放。我在 React 中的实现如下所示：

useEffect(() => {
  ref &&
    ref.current
      .play()
      .then(() => {})
      .catch((err) => {
        // Video couldn't play, low power play button showing.
      });   
}, []);

这应该可以让我们不必处理不一致的 Shadow DOM 属性。

资源：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play