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

在视频源文件中，您只需更改

即可

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 5

基于伊恩的回答

video::-webkit-media-controls {
    opacity: 0;
}

这将隐藏所有控件。适用于无法自动播放的背景视频。

Answer 6

对于webapps。适用于iOS 10.3 iPhone7＆amp; Mac上的Safari 10.1也是如此。感谢以前的贡献者。我还有一个问题，即元素根本不包含任何“控制”属性。

'<style type="text/css">'+
    '*::-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;'+
        '}'+
    +'</style>'

Answer 7

今天@ {2017年iOS 10这有效：

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

Answer 8

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

Answer 9

您无法删除播放按钮。此视频占位符始终显示为文档说： iPhone Video PlaceHolder。但也许你可以检测到你在iphone上并显示一个带有视频链接的图像，而不是视频标签。

<a href="yourvideo.mp4"><img src="yourposter.png"/></a>

该视频将作为视频标记在播放器中启动。

Answer 10

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

在iOS上没有为我工作，但是

*::-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 11

试试这个：

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

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

Answer 12

根据this answer，在Google Chrome浏览器中，我们可以像这样隐藏大播放按钮：

    video::-webkit-media-controls-overlay-play-button {
      display: none;
    }

如果您想在Android和iOS上将其隐藏，则可能会有用。

Answer 13

更新：

IOS 13。*

  video::slotted::-webkit-media-controls-container{
      display:none !important;
      visibility: hidden;!important;
      opacity: 0 !important;
     -webkit-appearance: none !important;
    }

IOS 14 将选择器更改为

:host::shadow::-webkit-media-controls-container{/* hide the element */}

有用的资源： html5rocks shadow dom 201

Answer 14

是的，你可以这样做！诀窍是通过不向视频标记添加“controls”属性来“隐藏”视频控件。然后，您可以在视频开始播放后几秒钟动态添加，方法是使用Javascript将“controls”属性附加到标记。只需将值设置为“控件”，它就会动态显示在DOM中......就好像您已将控件添加到视频标记的HTML中一样。根据需要调整计时器。

<video id="some-video-id" src="some-video-url" poster="some-thumbnail-url" />

<a href="javascript:void(0);" id="startVideoLink">Start the Video</a>

<script type="text/javascript">
    var oVideoTag = document.getElementById('some-video-id');
    var oLink = document.getElementById('startVideoLink');
    if (oLink && oVideoTag) {
        oLink.addEventListener('click',function(e) {
            oVideoTag.play();
            setTimeout(function() {
                oVideoTag.controls = 'controls';
            },2500);
        },false);
    }
</script>

隐藏iPhone HTML5视频播放按钮

14 个答案:

更新：