У меня есть элемент видео на странице, которая отлично работает как на сафари, так и на мобильном и рабочем столе. У меня есть полупрозрачное выпадающее меню, которое отлично работает. Проблема в том, что когда меню над видеоэлементом, на сафари на рабочем столе я вижу видео в меню (по желанию), в то время как на мобильной версии элемент видео остается на переднем плане (уродливый), независимо от того, что я говорю css. Есть ли способ обхода?
Проблема возникает только в том случае, если элемент видео был динамически создан. Если элемент находился только на странице при загрузке, z-index отлично работает.
Вы можете исправить z-index для динамически созданных видео, предоставив элемент видео -webkit-transform-style: preserve-3d.
Да, это так же плохо, как haslayout на IE!
К сожалению, нет.
Основываясь на моем опыте и понимании того, как работает iOS, это невозможно.
Mobile 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 и -webkit-transform:translateZ(0) не работали для меня.
Использование Flowplayer с плагином ipad и плагином панели управления позволило мне удалить панель управления, созданную ipad, и заменить ее на что-то, что можно индексировать z под моими модальными окнами.
Я столкнулся с этим также. Единственное, что я мог заставить работать для меня, это добавить
display:none
для видеотега при показе div над ним, на который нужно нажать.
Вы можете исправить z-index динамически созданные видео, предоставив элемент видео -webkit-transform-style: preserve-3d.
Это работало для меня с динамически созданным видеоэлементом. Я также установил z-index для переустановки div на z-index: 888;, который также мог помочь.
У меня была эта проблема, которая возникала на мобильных устройствах с меню холста. Когда меню закончилось над видео, вы не смогли нажать ни одного из пунктов меню.
Я исправил его, когда я перемещал видео где-то еще, когда меню было включено, установив его абсолютно на -100000px, когда меню не было отображено, он установил его обратно относительно относительно.
Я обнаружил, что использование дисплея не работает, поскольку когда вы устанавливаете его для блокировки снова, видео не будет работать.
Я также попытался установить высоту на 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"); или $("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 src для мобильных устройств:
отн = 0 &? Управление = 0 & ShowInfo = 0
Я никогда полностью не отслеживал, почему это работает, но я предполагаю, что элементы управления имеют некоторый стиль пользовательского агента, который дает им высокий индекс z и делает элемент сидеть поверх всего.