Воспроизведение видео Inline в Ionic/Phonegap (webkit-playinginline не работает)

Я использую HTML-тег видео, чтобы воспроизводить видео в моем ионном приложении. Здесь мой код:

<video autoplay loop class="video" webkit-playsinline>
    <source src="videos/polina.mp4" type='video/mp4; codecs="h.264"' >
    <source src="videos/polina.webm" type="video/webm">
</video>

Видео автоматически воспроизводится, однако видео открывается в исходный проигрыватель и не воспроизводится встроенным. После некоторых исследований я понял, что webkit-playsinline должен решить эту проблему, по крайней мере, на iOS, но, похоже, это не так для меня тестирование на iOS8 & 9.

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

Я даже немного заплатил, чтобы получить этот код здесь: https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video, который точно иллюстрирует то, что я пытаюсь создать (фоновое видео на моем экране входа в систему) но все же видео открывается в основной плеер.

Кто-нибудь смог получить видеоролик, чтобы сыграть inline в своем приложении с ионной/телефонной связью? Если да, то как?

Ответы

Ответ 1

Причина, по которой UIWebView не настроен для разрешения встроенного воспроизведения видео. На iPads оно по умолчанию разрешено, но на iPhone это не так.

Вы можете легко разрешить это, добавив это в свой config.xml:

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

UIWebView должен уважать атрибут webkit-playinginline.

Также код будет работать и на большинстве Android-устройств (особенно если вы добавите плагин Crosswalk). Однако сначала вы должны поместить веб-сайт, затем файл mp4, чтобы избежать проблем с некоторыми версиями Chrome).

Вы также должны добавить плакат = "firstFrame.jpg" к тегу видео, чтобы получить изображение, пока видео готовится к игре. Jpg должен быть первым кадром видео (используйте любой видеоредактор, который вам нравится извлекать).

Смотрите этот сайт для более полного примера (и бесплатно...). Я использовал это на Android/iOS с Кордовой с минимальными изменениями. Необходимые изменения: загрузить файлы в проект, использовать CrossWalk для Android, удалить селектор мультимедиа в css (он останавливает видео на небольших экранах по дизайну, но он хорошо работает в Кордове), добавьте атрибут playinline и, наконец, добавьте предпочтение в файле config.xml.

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video