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

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

это возможно?

11 53
html5 iphone

11 ответов:

похоже, Apple снова изменила shadow-dom.

для того, чтобы скрыть кнопку воспроизведения управления необходимо использовать следующие 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;
}
62

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

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

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

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

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

55

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

controls= "false"

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

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

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

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

8

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

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

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

1

для webapps. Работает iOS 10.3 iPhone7 и Safari 10.1 на Mac. Thx для предыдущих участников. У меня также была проблема, что элемент вообще не содержит атрибута "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>'
1

основываясь на ответе Яна

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

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

1

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

.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
    display: none !important;
}
1
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;
}

работала идеально!

0

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

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

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

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