Подтвердить что ты не робот

Ionic 3 - встроенное видео открывается в полноэкранном режиме в основном проигрывателе на iOS 10

Я пытаюсь воспроизвести встроенное видео в мобильном приложении ionic 3 - я бы хотел не запускать собственный видеоплеер.

Я тестирую на iPhone 5s - iOS 10.

Вот функция, которую я создал для загрузки видео в соответствии со всем, что я прочитал:

loadVideo(src: string, onComplete?: (src: string) => void): void {
    var video: HTMLVideoElement = document.createElement('video');

    video.setAttribute('playsinline', '');
    video.setAttribute('webkit-playsinline', '');
    video.setAttribute('src', src);

    var onVideoLoaded = () => {
        video.removeEventListener('loadeddata', onVideoLoaded);

        if (onComplete != null) onComplete(src);
    };

    video.addEventListener('loadeddata', onVideoLoaded);

    video.load();
}

После завершения загрузки я играю через video.play().

Другая версия этой функции:

loadVideo(src: string, onComplete?: (src: string) => void): void {
    var video: HTMLVideoElement = document.createElement('video');

    video.setAttribute('playsinline', '');
    video.setAttribute('webkit-playsinline', '');

    var srcElement: HTMLSourceElement = document.createElement('source');

    srcElement.setAttribute('src', src);
    srcElement.setAttribute('type', 'video/mp4');

    var onVideoLoaded = () => {
        video.removeEventListener('loadeddata', onVideoLoaded);

        if (onComplete != null) onComplete(src);
    };

    video.addEventListener('loadeddata', onVideoLoaded);

    video.appendChild(srcElement);
    video.load();
}

который использует элемент источника вместо атрибута источника в элементе видео.

Я также попытался написать видео-тег непосредственно в HTML на случай, если Angular имеет некоторый код, который позаботится об этом:

<video playsinline webkit-playsinline autoplay muted">
    <source src="test.mp4" type="video/mp4">
</video>

Так как автозапуск не должен поддерживаться для видео, которые не отключены, я попытался добавить атрибут muted также через HTML. При добавлении через JavaScript это, похоже, не дает эффекта при добавлении в качестве атрибута, вместо этого я пишу video.muted = true.

Другая вещь, которую я попробовал, состояла в том, чтобы воспроизвести приглушенное видео с участием пользователя, а не с автоматическим воспроизведением:

window.addEventListener('pointerdown', () => video.play());

Я также попытался использовать этот полифилл, который должен имитировать игры iOS 10 на iOS 8 и 9:

enableInlineVideo(video, false);

https://github.com/bfred-it/iphone-inline-video

Все, что я пробовал, заканчивалось тем же результатом - на iOS видео воспроизводится в полноэкранном режиме в нативном плеере, даже если оно должно воспроизводиться на линии, а на Android - на линии, как и ожидалось.

4b9b3361

Ответ 1

Пробовали ли вы в своем config.xml

следующем:
<preference name="AllowInlineMediaPlayback" value="true" />

Что запускает приложение Native для игры в Inline. приходя к HTML5, есть интересный факт, который был указан в сайте разработчика Apple

на iPhone и iPod touch, которые являются маленькими экранными устройствами, "Видео НЕ представлено в веб-странице"