Скрыть кнопку воспроизведения видео HTML5 на iPhone

Question

Я хочу скрыть большую кнопку воспроизведения, которая появляется по умолчанию на элементе <video>

Возможно ли это?

Answer 1

У меня нет устройства iOS, которое можно было бы протестировать, но, возможно, попробуйте это:

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

Answer 2

Похоже, Apple снова изменила теневой дом.

Чтобы скрыть управление кнопкой воспроизведения, вы должны использовать следующий 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

Взгляд на теневой DOM в Safari iOS говорит мне, что вы хотите (скрывая только большую центральную кнопку воспроизведения):

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

Ответ от Иана скрывает все, включая текстовые дорожки (закрытые подписи...)

Answer 4

В исходном видео файле вы можете просто изменить

controls= "false"

Для Safari CSS, который является родным браузером на ios, вы также можете попробовать этот хакерский трюк

.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

Сегодня @ 2017 в iOS 10 это работает:

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

Answer 7

Для веб-приложений.Работает iOS 10.3 iPhone7 и Safari 10.1 на Mac, а также.Спасибо предыдущим авторам.У меня также была проблема с тем, что элемент вообще не содержит никакого атрибута «control».

'<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 8

Согласно этому ответу , в Google Chrome мы можем скрыть кнопку большой игры, например:

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

Это может быть полезно, если вы хотите скрыть и ее на Androidкак на iOS.

Answer 9

Попробуйте это:

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

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

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

Отлично сработало!