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

Простое видео 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>

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

6 ответов

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

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

подтверждающий

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

Добавлено:

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

в config.xml а также

webkit-playsinline

к video элемент.

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

Воспроизведение Safari работает

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

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

Я не люблю яблоко:|

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

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

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

Я получил эту работу, найдя элемент видео, затем создав исходный элемент в сценарии (не в 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, и он застал меня на один день.

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

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

// 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. Я надеюсь, что это помогает кому-то.

Другие вопросы по тегам