У меня есть элемент видео на странице, который отлично работает как в мобильном сафари, так и на рабочем столе. У меня есть полупрозрачное выпадающее меню, которое работает нормально. Проблема в том, что когда меню находится над элементом видео, в сафари на рабочем столе я могу видеть видео под меню (по желанию), а в мобильной версии элемент видео остается на переднем плане (некрасиво), независимо от того, что я говорю css. Есть ли обходной путь?
Проблема возникает только в том случае, если элемент видео был создан динамически. Если элемент был просто на странице во время загрузки, z-index работает нормально.
Вы можете исправить z-индекс для динамически создаваемых видео, указав элемент видео -webkit-transform-style: preserve-3d.
Да, это так же плохо, как haslayout в IE!
transform-style также не помогает.
- person brendanmckeown; 05.06.2014
-webkit-transform-style помогает!
- person kiw; 10.02.2021
К сожалению нет.
Исходя из моего опыта и понимания того, как сейчас работает iOS, это невозможно.
Мобильный Safari на iPad прорезает дыру для окна Quicktime, которое воспроизводит видео, используя встроенное аппаратное ускорение для увеличения времени автономной работы. (На iPhone и iPod Touch просто откройте его в отдельном окне, чтобы добиться того же эффекта.)
Это окно плохо сочетается с другим HTML-кодом на странице. На самом деле, я не нашел способа заставить мобильный Safari отображать что-либо поверх тега. Я предполагаю, что это связано с тем, что аппаратное ускорение позволяет только масштабировать и позиционировать видео, и что оно может обрабатывать только одно видео за раз.
Я использую Flowplayer и простое раскрывающееся меню CSS, и у меня была такая же проблема.
У меня есть выпадающее меню, которое при нажатии охватывает часть области видео. Подменю отображается поверх видео, как и ожидалось, но события касания не отправляются.
Я исправил это, объединив несколько предложений от других, отвечающих на этот вопрос: я установил видимость:скрытый при открытии меню и видимость:видимый при закрытии подменю И установите для видео свойство CSS -webkit-transform-style:preserve-3d.
Вот соответствующий код. Я не использовал CSS для строки меню, но он делает то, что вы могли ожидать, — в результате получается меню, которое охватывает части видео.
меню и видео HTML
<div id='nav'>
<ul>
... <!-- bunch of ul/li stuff here for the menu and submenus -->
</ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>
CSS
video {
-webkit-transform-style: preserve-3d;
}
JavaScript
$(document).ready(function(){
$("#nav li").hover(
function() {
$(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
$("video").css({visibility:"hidden"});
},
function(){
$(this).find('ul:first').css({visibility: "hidden"});
$("video").css({visibility:"visible"});
}
);
);
Мне удалось разместить меню div над тегом видео html5 в мобильном сафари на ipad. Честно говоря, у меня не было никаких проблем, и это просто работало. Это может быть потому, что я использовал анимацию CSS3 и, следовательно, графический процессор? Вы можете попробовать использовать хак, чтобы добавить элемент в GPU. Если вы поместите -webkit-transform: translateZ(0); на элемент, он должен заставить его использовать графический процессор...
-webkit-transform-style: preserve-3d
- person Martin; 18.01.2013
Я также столкнулся с этим. Единственное, что я мог заставить работать на меня, это добавить
display:none
к тегу видео при отображении над ним div, на который нужно было щелкнуть.
-webkit-transform-style:preserve-3d и -webkit-transform:translateZ(0) мне не подошли.
Использование Flowplayer с плагином ipad и плагином панели управления позволило мне удалить панель управления, созданную ipad, и заменить ее чем-то, что можно индексировать по z под моими модальными окнами.
Вы можете исправить z-index в динамически создаваемых видео, указав элемент видео -webkit-transform-style: preserve-3d.
Это сработало для меня с динамически созданным видеоэлементом. Я также установил z-index наложенного div на z-index: 888;, что, возможно, также помогло.
Когда у вас есть элемент, который вы хотите разместить перед <video> в Safari, вам нужно установить в этот элемент transform: translateZ(1px) или более пикселей, так как Safari устанавливает для вашего элемента <video> значение 0 для оси Z (transform: translateZ(0)).
Это единственное, что мне помогло. Нет z-index, нет transform-style:preserve-3d.
-webkit-transform: translateZ(1px) к этим div'ам, и теперь все идеально.
- person sdym; 28.12.2020
У меня была эта проблема, которая возникала на мобильных устройствах с меню вне холста. Когда меню было над видео, вы не могли нажать ни на один из пунктов меню.
Я исправил это, переместив видео в другое место, когда меню было включено, позиционируя его абсолютно на -100000 пикселей, когда меню не отображалось, оно вернуло его обратно в относительное положение.
Я обнаружил, что использование display none не работает, так как, когда вы снова устанавливаете блокировку, видео не будет работать.
Я также попытался установить высоту на 0 — это не сработало, поскольку видео, казалось, все еще занимало место, хотя вы его не видели.
Последний метод кажется немного экстремальным, но это не очень заметно при его использовании.
Это код, который будет работать как на iPad, так и на iPhone. Я попытался удалить элементы управления, а затем добавить их снова, но это сработало только на iPad, а не на iPhone. После удаления непрозрачности, а затем добавления ее снова, это сработало и на iPhone.
$("#overlay_open").click(function(){
$("video").prop("controls", false);
$("video").css("opacity", 0);
});
$("#overlay_close").click(function(){
$("video").prop("controls", true);
$("video").css("opacity", 1);
});
Просто сегодня столкнулся с этой проблемой, и мне пришлось собрать решение из нескольких ответов, поскольку ни один из них полностью не справился с проблемой...
У меня есть видеоэлементы в свернутом списке стилей «табличного представления», которые фиксируют события касания на iPhone при попытке коснуться других элементов списка. На iPhone видео воспроизводилось при нажатии на другие свернутые элементы, которые занимали то же место на экране.
Для исправления этого потребовалось все следующее:
1) Используя это:
video{
-webkit-transform-style: preserve-3d;
}
... похоже, не имело никакого эффекта, но я все равно оставил его. Теперь все работает, так что я не хочу больше с этим связываться :)
2) Переключение только visibility: hidden не сработало, а display:none не сработало, как ожидалось.
3) В дополнение к «видимости» атрибут видеотега HTML5 controls также должен динамически добавляться/удаляться. Либо:
$("video").css({visibility:"hidden"}).removeAttr("controls"); or $("video").css({visibility:"visible"}).attr("controls", "controls");
4) Необходимо установить видимость/элементы управления при загрузке документа в зависимости от начального размера браузера/экрана.
5) Хотя основной проблемой было странное поведение iPhone, мне также приходилось учитывать изменения размера окна, превышающего мою наименьшую контрольную точку медиа-запроса в 600 пикселей, иначе видео появлялось/исчезало при неправильных размерах экрана.
$(window).resize(function(){
if ($(window).width() > 600){
$("video").css({visibility:"visible"}).attr("controls", "controls");
}
});
Довольно сложно обойти глупую ошибку мобильного Safari... Я очень надеюсь, что это сработает на iPad, когда я проверю его позже...
Для тех, кто столкнулся с проблемами с этим, еще одно исправление, которое в конечном итоге сработало для меня, заключалось в изменении параметров в коде встраивания, чтобы запретить элементы управления, предлагаемые видео, а также параметры заголовка видео и проигрывателя. Я добавил простой запрос Modernizr.MQ, чтобы изменить src для планшета и мобильного телефона, и включил следующее в iframe. исходный код для мобильных устройств:
?rel=0&controls=0&showinfo=0
Я так и не понял, почему это работает, но я предполагаю, что элементы управления имеют некоторый стиль пользовательского агента, который дает им высокий z-индекс и заставляет элемент располагаться поверх всего.
