web-dev-qa-db-fra.com

Ionic 3 - la vidéo en ligne s'ouvre en plein écran dans le lecteur natif sur iOS 10

J'essaie de lire une vidéo en ligne dans une application mobile ionic 3 - je voudrais éviter de lancer le lecteur vidéo natif.

Je teste sur iPhone 5s - iOS 10.

Voici une fonction que j'ai créée pour charger des vidéos en fonction de tout ce que j'ai lu:

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();
}

Une fois le chargement terminé, je le joue via video.play ().

Une autre version de cette fonction est:

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();
}

qui utilise l'élément source au lieu de l'attribut source dans l'élément vidéo.

J'ai également essayé d'écrire une balise vidéo directement en HTML au cas où Angular a du code sous le capot qui s'occupe de cela:

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

Comme la lecture automatique n'est pas censée être prise en charge pour les vidéos qui ne sont pas muettes, j'ai essayé d'ajouter également l'attribut muet via HTML. Lorsque vous l'ajoutez via JavaScript, cela ne semble pas avoir d'effet lorsque vous l'ajoutez en tant qu'attribut, j'écris plutôt video.muted = true.

Une autre chose que j'ai essayé était de lire une vidéo en sourdine avec l'interaction de l'utilisateur au lieu de la lire automatiquement:

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

J'ai également essayé d'utiliser ce polyfill qui est censé imiter les jeux en ligne d'iOS 10 sur iOS 8 et 9:

enableInlineVideo(video, false);

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

Tout ce que j'ai essayé finit par avoir le même résultat - sur iOS, la vidéo est lue en plein écran dans le lecteur natif même si elle est censée jouer en ligne, et sur Android elle joue en ligne comme prévu.

javascriptiosangularcordovaionic-framework
13
Royi Bernthal

Avez-vous essayé ce qui suit dans votre config.xml

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

Qui déclenche l'application native pour jouer en ligne. en arrivant au HTML5, il y a un fait intéressant qui a été déclaré dans Apple Developer Site

sur iPhone et iPod touch, qui sont de petits écrans, "la vidéo n'est PAS présentée dans la page Web"

28
Webruster

Cela prend en fait deux choses et cela fonctionne sur l'iPhone:

Ajoutez ceci à config.xml

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

Et dans le HTML, vous devez inclure webkit-playsinline

<video webkit-playsinline playsinline autoplay muted loop><source src='vid/vid.mp4' type='video/mp4'></video>

Dupliquer pour

Phonegap iOS HTML5 Video ouvre le lecteur

crédits à @ a432511

0
Himalaya Ahuja