web-dev-qa-db-fra.com

vidéo en ligne html5 sur iphone

Je souhaite lire une vidéo HTML5 sur l'iPhone, mais chaque fois que j'essaie, l'iPhone apparaît automatiquement en plein écran lorsque la vidéo ".play ()" est appelée. Comment lire la vidéo en ligne sans que l'iPhone ne modifie l'interface utilisateur de cette manière:

http://www.easy-bits.com/iphone-inline-video-autostart

http://www.takeyourdose.com/fr (lorsque vous cliquez sur "Démarrer l'expérience 360")

Edit: Voici mon code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>iPhone Test</title>
        <meta charset="utf-8">
    </head>
    <body>
        <button onclick="document.getElementById('vid').play()">Start</button>

        <video id="vid">
            <source src="/videos/tutorial.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </body>
</html>
iphonehtml5user-interfacevideo
8
Chris Johnson

Je travaille sur une solution à ce problème jusqu'à ce qu'Apple permette au "webkit-playsinline" de jouer en ligne.

J'ai commencé une bibliothèque ici: https://github.com/newshorts/InlineVideo

C’est très difficile, mais Gist, en gros, c’est que vous "cherchez" dans la vidéo au lieu de la jouer directement. Donc au lieu d'appeler:

video.play()

Vous définissez plutôt une boucle en utilisant request animation frame ou setInterval, puis définissez le:

video.currentTime = __FRAME_RATE__

Donc, le tout pourrait ressembler à votre html:

<video controls width="300">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
<canvas></canvas>
<button>Play</button>

et votre js (assurez-vous d'inclure jquery)

var video = $('video')[0];
var canvas = $('canvas')[0];
var ctx = canvas.getContext('2d');
var lastTime = Date.now();
var animationFrame;
var framesPerSecond = 25;
function loop() {
    var time = Date.now();
    var elapsed = (time - lastTime) / 1000;

    // render
    if(elapsed >= ((1000/framesPerSecond)/1000)) {
        video.currentTime = video.currentTime + elapsed;
        $(canvas).width(video.videoWidth);
        $(canvas).height(video.videoHeight);
        ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        lastTime = time;
    }

    // if we are at the end of the video stop
    var currentTime = (Math.round(parseFloat(video.currentTime)*10000)/10000);
    var duration = (Math.round(parseFloat(video.duration)*10000)/10000);
    if(currentTime >= duration) {
        console.log('currentTime: ' + currentTime + ' duration: ' + video.duration);
        return;
    }

    animationFrame = requestAnimationFrame(loop);
}

$('button').on('click', function() {
  video.load();
  loop();
});

http://codepen.io/newshorts/pen/yNxNKR

Le vrai pilote pour Apple sera la version récente de webGL pour les périphériques ios activée par défaut. Fondamentalement, il y aura beaucoup de gens qui cherchent à utiliser les textures vidéo. techniquement en ce moment, cela ne peut pas être fait.

8
newshorts

Sur IOS10/Safari 10, vous pouvez maintenant ajouter la propriété playsinline à l'élément Vidéo HTML5, qui sera simplement lue en ligne.

5
Eek

Si vous créez un élément audio et un élément vidéo, vous pouvez lire l'audio via une interaction utilisateur, puis rechercher la vidéo et la restituer sur une toile. C'est quelque chose de rapide que j'ai trouvé (testé sur iPhone iOS 9)

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var audio = document.createElement('audio');
var video = document.createElement('video');

function onFrame(){
    ctx.drawImage(video,0,0,426,240);
    video.currentTime = audio.currentTime;
    requestAnimationFrame(onFrame);
}

function playVideo(){
    var i = 0;
    function ready(){
        i++;
        if(i == 2){
            audio.play();
            onFrame();
        }
    }
    video.addEventListener('canplaythrough',ready);
    audio.addEventListener('canplaythrough',ready);

    audio.src = video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4";

    audio.load();
    video.load();
}

CodePen

Page de test

3
Kyle

Toutes mes excuses pour avoir écrit ceci comme réponse plutôt que comme commentaire sur le fil principal, mais je n'ai apparemment pas assez de points de réputation pour commenter!

Quoi qu'il en soit, je cherche aussi à faire exactement la même chose que le PO.

J'ai remarqué qu'il existe une bibliothèque particulière, krpano , associée au plug-in krpano videoplayer qui permet de lire des vidéos sur iPhone INLINE! Quelques démos de ceci en action peuvent être trouvés ici: http://krpano.com/video/

Bien que je préfère un simple exemple de vidéo 2D par rapport à ces vidéos panoramiques délirantes, c’est le plus proche que j’ai trouvé en parcourant le Web. D'après ce que je peux dire, ils utilisent un élément normal non attaché au document:

var v = document.querySelector('video');

// remove from document
v.parentNode.removeChild(v); 

// touch anywhere to play
document.ontouchstart = function () {
  v.play();
}

Élément vidéo avant son retrait:

<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>

Mais cela ne semble pas suffire: lorsque la vidéo est lue, elle passe toujours en plein écran.

Comment parviennent-ils à empêcher la vidéo de passer en plein écran?

EDIT: Après avoir examiné les deux exemples, ils ont eu l’impression qu’ils utilisaient tous les deux l’élément canvas pour restituer la vidéo. J’ai donc décidé de lancer une démonstration montrant le rendu vidéo via l’élément canvas. Bien que la démo fonctionne parfaitement, elle ne parvient pas à diffuser sur iPhone (même si l'élément vidéo est complètement supprimé du DOM!) - la vidéo passe toujours en plein écran. Je pense que la prochaine étape consisterait à appliquer ces mêmes principes à un canevas WebGL (c'est ce que font les exemples de krpano), mais entre-temps, cette démonstration suscitera peut-être des idées dans d'autres ...

http://jakesiemer.com/projects/video/index.htm

1
Jake