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

Ответ 1

Кажется, 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;
}

Ответ 2

У меня нет устройства iOS для тестирования, но, возможно, попробуйте следующее:

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

Ответ 3

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

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

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

Ответ 4

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

controls= "false"

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

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

Здесь ссылка на подробное обсуждение управления/скрытия элементов управления на видео HTML 5

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

Ответ 5

На основании ответа Яна

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

Это скроет все элементы управления. Хорошо для фоновых видео, которые не будут автоматически запускаться.

Ответ 6

Для webapps. Работает с 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>'

Ответ 7

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

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

Ответ 8

Вы не можете удалить кнопку воспроизведения. Этот видеозаполнитель всегда появляется, поскольку документ говорит: iPhone Video PlaceHolder. Но, может быть, вы можете обнаружить, что вы находитесь на iphone и отображаете изображение со ссылкой на свое видео, а не видеотег.

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

Видео будет запущено в проигрывателе, как видео-тег.

Ответ 9

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

Работал отлично!

Ответ 10

Попробуйте следующее:

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

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

Ответ 11

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

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

Возможно, это также будет работать для браузера iOS/WebView.

Ответ 12

Да, вы можете это сделать! Хитрость заключается в том, чтобы "скрыть" элементы управления видео, не добавляя атрибут "controls" к вашему тегу видео. Затем вы можете динамически добавить его через несколько секунд после начала воспроизведения видео, добавив свойство "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>