наложение поверх динамически вставляемого тега видео в iPad - PullRequest
Новая
       13

наложение поверх динамически вставляемого тега видео в iPad

2 голосов
/ 29 июля 2011

Я сейчас разрабатываю видеоплеер с поддержкой ipad.
Это больше плагин jquery. Он отлично работает на рабочем столе, и мне даже удалось добавить свои пользовательские элементы управления на ipad.
Пока все хорошо.
Проблема в том, что я динамически создаю и вставляю элемент видео, что немного портит iPad. Я следовал этому подходу, потому что обнаружил (через несколько долгих часов), что, если вы попытаетесь обернуть ($.wrap) видео в контейнер, оно вылетит.
После вставки видео оно работает почти как обычно (оно воспроизводимо и реагирует на события), но его свойства положения / отображения испорчены: Я не могу добавить наложение поверх него. Это проблема, потому что я хочу, чтобы мои элементы управления отображались в верхней части видео.

Более того, само видео не реагирует на обычные touchmove touchstart touchend события. После некоторых исследований выясняется, что если у вас не включены элементы управления по умолчанию, видео захватывает все события ( события касания iPad на теге ).
Вторая проблема заключается в том, что после включения элементов управления по умолчанию элемент video по-прежнему игнорирует мои обработчики событий.

Итак, мои вопросы (оба только в случаях Ipad):

  • Вы когда-нибудь сталкивались с этой проблемой, и, конечно, если вы это сделали, как вы ее исправили?
  • только жестко закодированные видеоэлементы вызывают события?

Ответы [ 3 ]

9 голосов
/ 29 июля 2011

После еще нескольких копаний я нашел ответ.
Похоже, что неотмеченный ответ в этот вопрос о переполнении стека содержит ключ.
Итак, как Jaffa The Cake (кому я благодарен) говорит: «Вы можете исправить z-index для динамически создаваемых видео, задав элемент видео -webkit-transform-style: preserve-3d» единственный способ - использовать свойство css3 -webkit-transform-style: preserve-3d.
Таким образом, поверх видео можно наложить оверлей, который может обрабатывать все события (например, воспроизведение / пауза).

0 голосов
/ 27 мая 2014

Решением для меня было удалить элементы управления с помощью jQuery для всех видео, подобных этому 

$('video').each(function() {
    $(this).removeAttr("controls");
});

Затем наложенные элементы также реагируют на соответствующие события.Чтобы видео снова заработало, я добавил событие jquery click, которое воспроизводит / приостанавливает видео: 

$('video').click(function() {
    $(this).trigger('play');
});

Надеюсь, это поможет.

0 голосов
/ 29 июля 2011

Ни один Ipad не может обрабатывать динамически вставленное видео с помощью Jquery, на Ipad видео не реагирует на прикосновения или перемещение, так как по умолчанию вы должны нажать на ссылку, например кнопку воспроизведения, чтобы запустить аудио-видео, поэтому вы можете просто использовать Jquery, чтобы сделатьэто как показано ниже

видео 

var vid = $('video').get(0);

$('#someselector').click(function() {
 vid.play();

 });
$('#someselector').click(function() {
 vid.stop();

 });

аудио 

var aud = $('audio').get(0);

$('#someselector').click(function() {
 aud.play();

 });
$('#someselector').click(function() {
 aud.stop();

 });

Надеюсь, это помогло.

...