隐藏iPhone HTML5视频播放按钮

I want to hide the big play button that appears by default on the <video> element

我想隐藏在

Is it possible?

是可能的吗?

11 个解决方案

#1

It seems Apple has changed the shadow-dom again.

看来苹果又改变了阴影。

In order to hide the play button control you must use the following CSS:

为了隐藏播放按钮控件，您必须使用以下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;
}

#2

104

I don't have any iOS device handy to test, but perhaps try this:

我没有任何iOS设备可以测试，但不妨试试这个:

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

#3

A look at the shadow DOM in Safari iOS tells me that what you want (hidding only the big central play button) is:

看一下Safari iOS中的影子DOM，你想要的是:

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

The answer from Ian hides everything including text tracks (closed captions ...)

Ian的答案隐藏了所有内容，包括文本跟踪(关闭字幕…)

#4

In the video source file you can simply change

在视频源文件中，您可以简单地更改

controls= "false"

For the Safari CSS, which the native browser on ios, you can also try this hacky trick

对于Safari CSS (ios上的本机浏览器)，您也可以尝试一下这种陈腐的技巧

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

Here's a link to a details discussion on managing/hiding controls on HTML 5 video

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

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

#5

You can't remove the play button. This video placeholder always appears as the doc says : iPhone Video PlaceHolder. But maybe you can detect you're on an iphone and display an image with a link to your video instead of the video tag.

你不能删除播放按钮。这个视频占位符总是出现在文档中:iPhone视频占位符。但也许你可以检测到你在iphone上，并显示一个链接到你的视频而不是视频标签的图像。

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

The video will be launched in a player just as a video tag.

该视频将作为视频标签在播放器中发布。

#6

For webapps. Works iOS 10.3 iPhone7 & Safari 10.1 on Mac as well. Thx to previous contributors. I had also the issue that the element does not contain any "control" attribute at all.

webapps。在Mac上也能运行ios10.3 iPhone7和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>'

#7

Based on Ian's answer

基于伊恩的回答

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

This will hide all controls. Good for background videos that won't autoplay.

这将隐藏所有控件。对不会自动播放的背景视频很好。

#8

Today @2017 in iOS 10 this works:

在ios10系统中，今天@2017可以做到:

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

#9

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

Didn't work for me on iOS, but

我在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;
}

Worked perfect!

完美的工作!

#10

Try this:

试试这个:

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

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

#11

-5

Yes you can do this! The trick is to "hide" the video controls, by not adding the "controls" attribute to your video tag. Then you let it be dynamically added a few seconds after the video starts to play, by appending the "controls" property to the tag using Javascript. Simply set the value to "controls" and it will dynamically appear in the DOM... as if you had added the controls to your video tag's HTML. Adjust the timer as needed.

是的，你能做到!诀窍是“隐藏”视频控件，方法是不向视频标记添加“控件”属性。然后，在视频开始播放几秒钟后，通过使用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>

#1