IPad html5 видео с элементами управления NO?

Это убивает меня весь день, но я не уверен, как заставить видеопроигрыватель html5 работать без встроенных элементов управления.

Я не хочу контролировать что-то-никогда, но если я их не включу, видео, похоже, не хочет играть, даже если я добавлю несколько javascript ниже, пытаясь заставить его играть, он работает на iPhone и несколько браузеров, но не iPad, что странно, любая идея?

Вот некоторая разметка, если это поможет!

<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video>

$('#video').click(function(){
   document.getElementById('video').play();
});

Ответ 1

iOS не поддерживает атрибут autoplay тега видео. Также представляется, что вы не можете использовать jQuery для привязки к событию клика из видеоэлемента (см. fiddle).

Обходным путем является положение невидимого div над элементом видео и привязка клика, который воспроизводит видео, к этому (см. fiddle):

HTML:

<div id="video-overlay"></div>
<video id="video" width="400" height="300">
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
</video>

CSS

#video { border: 1px solid black; }
#video-overlay { position: absolute; width: 400px; height: 300px; z-index: 999;  }

JQuery

$('#video-overlay').click(function(){
   document.getElementById('video').play();
});

Ответ 2

По дизайну вы не можете автовоспроизводить видео, но достаточно просто удалить элементы управления после того, как воспроизведение началось, что я предполагаю - это тот эффект, который вы действительно хотите:

<video id="video" src="video.mp4" poster="image.jpg" preload="auto" onplaying="this.controls=false"/></video>

Ответ 3

Я использовал этот

<video id="video" controls="true" width="300" height="250" poster="gray30x25.gif"  autoplay onplaying="this.controls=false">

controls="true" - заставляет его работать на ipad

autoplay - делает его автовоспроизведением, кроме мобильного

onplaying="this.controls=false" - удаляет элементы управления при воспроизведении

Он автоматически запускается на ноутбуке и работает на iPad!
спасибо Doin

Ответ 4

Лучшее, что я могу сделать, это воспроизвести видео, как только пользователь коснется экрана, чтобы сделать что-либо, даже прокрутите страницу вниз.

function playVideoNow(e)
{
    document.getElementById('video').play();
    document.removeEventListener('touchstart', playVideoNow);
}

document.addEventListener('touchstart', playVideoNow, false);

Ответ 5

В настоящее время iOS 6 поддерживает элемент autoplay на некоторых устройствах.

Отметьте http://www.longtailvideo.com/html5/autoloop/ для справки.