html5 Видео не работает на ipad

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

Я использую html5video.js то, что я вижу на ipad, - это только изображение плаката, и когда я нажимаю ipad, ничего не происходит. ниже приведен мой код

<!doctype html>
<html>
 <head>
   <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
   <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
   <script src="http://vjs.zencdn.net/c/video.js"></script>

   <script>
    var video = document.getElementById('video');
    video.addEventListener('touchstart',function(){
            video.play();
    },false);
</script>
</head>
<body>
   <video id="video" class="video-js vjs-default-skin" preload="auto" width="620" height="860" poster="img/poster.png" data-setup="{}">
    <source src="video/Motion.mp4" type='video/mp4'>
    </video>
</body>
</html>

4 ответов


вы обслуживаете видео с правильным типом MIME? Отличный Видео В Интернете статья погружением в HTML 5 охватывает все, что вам нужно знать о обслуживании видео. Путь вниз в нижней части статьи (мимо всей справки по кодировке) охватывает проблемы с iPhones и iPads а также необходимость правильного типа MIME. Оно того стоит.

редактировать

для работы с iOS Accept-Ranges: bytes протоколу HTTP заголовок ответа должен быть включен, см.: Safari Web Content Guide-Настройка Сервера


попробуй :

document.addEventListener('touchstart', function(event) {
 video.play();
}, false);

для меня работает на Android планшет samsung, iphone и ipad 2/3.


в моем случае тип MIME был правильным, но мой сервер не позволял клиенту запрашивать частичные файлы с HTTP-заголовком диапазона. Поэтому сервер должен отправить "Accept-Ranges: bytes", когда вы запрашиваете этот файл mp4, iPad откажется загружать этот файл, если он будет вынужден загрузить его полностью.


У меня была та же проблема. Видео не воспроизводилось только на iPad и iPhone4. Ничего не помогало. Наконец я обнаружил, что мой .файл mp4 был в неправильном формате. Я не создавал этот файл. После того, как я снова преобразовал его в формат mp4, он работал.