Почему HTML5-видео не воспроизводится в IOS 8 WebApp (веб-просмотр)?

Простой HTML5-видео воспроизводится в браузере Safari. но после добавления его на главный экран (Standalone WebApp) он не работает. Он работает на iOS7, но перестает работать на iOS8.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>HTML5 Video Standalone Test</title>
    <style>
    body{
        margin:0;
        }
    </style>
</head>
<body>
    <video src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" autoplay="autoplay" controls="true" webkit-playsinline />
</body>
</html>

Пожалуйста, помогите. Есть ли какое-либо решение для этого?

Ответ 1

Воспроизведение видео нарушено в автономных приложениях в IOS 8.0.2

Ответ 2

Похоже, что iOS 8.3 устраняет эту проблему. У меня есть автономное веб-приложение, которое использует аудио-элемент, и теперь он работает как ожидается. НАКОНЕЦ!

Ответ 3

Подтверждая

Упакованная кордова Приложение не может загружать видео

Добавлено:

<preference name="AllowInlineMediaPlayback" value="true"/>

до config.xml и

webkit-playsinline

в элемент video.

Пользовательский интерфейс говорит, что видео Loading, а video.networkStatus остается 2 (NETWORK_LOADING) и video.readyState 0 (HAVE_NOTHING)

Работа Safari работает

Воспроизведение стартового экрана не работает

Для того же webapp, который работал в ios Safari, версия для рабочего стола делает не воспроизведение видео, и сбой webapp при попытке изменить источник video.

Мне не нравится яблоко: |

Ответ 4

У меня есть два приложения, которые используют видео HTML5. Один перестал работать, другой - нет. Существовали две отличия:

Тот, который по-прежнему работает, добавляет теги источника в тег видео ПОСЛЕ добавления тега видео в DOM.
Приложение, которое все еще работает, имеет автовоспроизведение, установленное на false (<video autoplay="false">...</video>)

Первое не имело значения, второе заняло приложение снова.

Ответ 5

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

Вот как выглядел мой старый код:

// Create the audio tag
var sprite = document.createElement('audio');
var id = document.createAttribute('id');
id.nodeValue = 'audio_sprite';
var src = document.createAttribute('src');
src.nodeValue = 'my-audio-sprite.mp3';

sprite.setAttributeNode( id );
sprite.setAttributeNode( src );

// Add it to the DOM
var body = document.getElementsByTagName('body')[0];
body.appendChild( sprite );

// Play/Pause to load the audio.
sprite.play();
sprite.pause();

Вот что я делаю сейчас.

// Grab an existing DOM element and create an audio tag.
var body = document.getElementById('hover');
body.innerHTML += '<audio id="audio_sprite"><p>Audio not supported</p></audio>';

// Apply the SRC to the audio tag.
// Q: Why don't we just do that in the step above?
// A: I'm not really sure why, but iOS8 doesn't like it. Sorry this is so ugly.
var sprite = document.getElementById( 'audio_sprite' );
sprite.src = 'my-audio-sprite.mp3';

// Once the metadata is loaded, call play/pause so we can play the audio later.
sprite.addEventListener('loadedmetadata', function() {
    sprite.play();
    sprite.pause();
});

В моем сознании, оба должны работать, однако, на практике, только второй для iOS8. Надеюсь, это поможет кому-то.

Ответ 6

Я получил эту работу, найдя элемент видео, а затем создав исходный элемент в script (не в html) - странно знаю:

var video = document.getElementById('theVideo');
var source = document.createElement('source');

source.src = fileLocation
source.type = "video/mp4"

video.appendChild( source );
video.load();

Я также признаю, что это старая проблема, но я столкнулся с ней, когда тестировал iPad, на котором установлена iOS 8.0.2, и это поймало меня на день.