Я пытаюсь воспроизвести встроенное видео в мобильном приложении 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 - на линии, как и ожидалось.