iPad / iPhone HTML5 видео загрузка - PullRequest
5 голосов
/ 09 июня 2010

Я пытаюсь загрузить на лету iPad / iPhone и замечаю, что не могу поместить div выше этого. Я поместил оверлей в html, чтобы он генерировался при загрузке страницы, а не добавлялся через javascript и видео, когда его созданный элемент абсолютно расположен под этим элементом. Это работает на ПК, мне интересно, если он был создан с помощью js, iPhone OS переопределяет z-index и форсирует к вершине?

Также есть ли способ переопределить стандартное «значок не воспроизводится», тот, который имеет косую черту, и показать вместо этого анимацию загрузки? Это решило бы мою проблему другим путем.

Моим последним вариантом будет загрузка всех тегов видео с помощью js при загрузке страницы и их наложение друг на друга для iPad / iPhone? Поскольку iPhone OS не загружает видео, пока не будет запрошено, сработает ли это?

У меня также есть проблема с iPhone, и я вижу атрибут "poster", установленный в теге video.

Ответы [ 4 ]

6 голосов
/ 12 апреля 2011

Я нашел довольно хороший обходной путь. Я использую jquery , так что об этом нужно помнить.

Моя проблема заключалась в том, что я создавал веб-приложение для Ipad с навигационной кнопкой в ​​левом нижнем углу (я не могу дать ссылку, так как это клиентский проект). Когда пользователь нажимает (нажимает) кнопку в левом нижнем углу, появляется анимированное раскрывающееся меню, и затем вы можете нажимать кнопки в этих меню, чтобы перейти к более глубоким подменю.

Проблема:

любые теги li (или что-нибудь в этом роде), которые были над видео, не будут кликабельными, поэтому на страницах с видео часть моей касания (часть над видео не будет работать). Чтение сообщений здесь на самом деле приводит меня к моему решению, простому, и оно может или не может работать для вашего случая, но я надеюсь, что оно подойдет.

Мой обходной путь:

var myNav = $("TAG_SELECTOR_HERE");

myNav.toggle(function(){
   var videos = $("video");
   videos.removeAttr("controls");
},
function(){
   var videos = $("video");
   videos.attr("controls","true");
})

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

Вы можете использовать этот метод где угодно ... вы можете удалить элементы управления после окончания видео, после того, как кто-то наводит курсор на что-то (предполагая, что что-то еще не над видео), когда мышь находится в определенных координатах может быть вашим единственным решением в крайних случаях), но это должно сработать.

Спасибо !!

-Nick

1 голос
/ 17 июня 2010

Вы можете расположить изображение абсолютно поверх видеоплеера. Safari на iPhone будет отображать его с прозрачным символом воспроизведения. Я верю, что что-то подобное может работать:

<style type="text/css">
div.player
{
    position: relative;
    margin: 0;
    padding: 0;
}

div.player > img.preview
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    cursor: pointer;
}
</style>

И

<div class="player">
  <img class="preview" src="zk/grumpies.png" width="320" height="240" alt="click to play" title="click to play">
  <video width="320" height="240" controls="controls">
    <source type="video/mp4" src="mah/mahnamahna.m3u8" width="320" height="240" /> 
  </video>
</div>

На iPad он может работать по-разному, в зависимости от того, используете ли вы <video controls /> или нет - в этом случае вам нужно предоставить собственные элементы управления с помощью javascript, иначе вы не сможете запустить медиафайл.

В моем опыте значок «не может быть воспроизведен», как правило, всегда указывает на то, что мультимедиа не может быть воспроизведено на самом деле ;-) из-за неправильного mimetype или кодека, неправильного src и т. Д. Отмена этого может привести к проверке исключения ошибок загрузки носителя с помощью JavaScript.

Я считаю невозможным наложение носителей друг на друга. Возможно, вы притворяетесь, меняя позиции.

1 голос
/ 15 июня 2010

iPhone не поддерживает постер ... до os4

0 голосов
/ 06 января 2011

У меня была такая же проблема с видеоплеером iPad. Визуально z-индекс был ниже, чем наложение для диалогового окна, но на самом деле это не так. Если вы замените стандартные элементы управления на свои собственные, используя javascript, проблема исчезнет.

http://sandbox.solutionsbydesign.com/montage/ipad/

Я использовал статью NetTuts для создания собственного видеоплеера HTML5

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...