it-swarm.com.de

inline-HTML5-Video auf dem iPhone

Ich möchte ein HTML5-Video auf dem iPhone abspielen, aber bei jedem Versuch wird das iPhone automatisch im Vollbildmodus angezeigt, wenn das Video '.play ()' aufgerufen wird. Wie kann ich das Video inline abspielen, ohne dass das iPhone die Benutzeroberfläche wie folgt ändert:

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

http://www.takeyourdose.com/de (Wenn Sie auf "360-Erfahrung starten" klicken)

Edit: Hier ist mein 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>
8
Chris Johnson

Ich arbeite an einer Lösung dafür, bis Apple es zulässt, dass "webkit-playsinline" tatsächlich Inline spielt.

Ich habe hier eine Bibliothek angelegt: https://github.com/newshorts/InlineVideo

Es ist sehr grob, aber das grundlegende Gist ist, dass Sie durch das Video "suchen", anstatt es direkt abzuspielen. Also anstatt zu rufen:

video.play()

Sie legen stattdessen eine Schleife mit dem Request-Animationsframe oder setInterval fest und legen dann Folgendes fest:

video.currentTime = __FRAME_RATE__

So könnte das Ganze in Ihrem HTML aussehen:

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

und Ihre Js (stellen Sie sicher, dass Sie Jquery einschließen)

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

Der eigentliche Treiber für Apple, der dies ändert, ist die neueste Version von webGL für iOS-Geräte, die standardmäßig aktiviert ist. Grundsätzlich wird es eine Menge Leute geben, die Videotexturen verwenden wollen. technisch ist das momentan nicht möglich.

8
newshorts

Auf IOS10/Safari 10 können Sie jetzt die playsinline -Eigenschaft zum HTML5-Video-Element hinzufügen und es wird nur Inline abgespielt.

5
Eek

Wenn Sie ein Audioelement und ein Videoelement erstellen, können Sie das Audio über Benutzerinteraktion wiedergeben und dann das Video suchen und auf eine Leinwand rendern. Dies ist etwas, das ich schnell gefunden habe (getestet auf 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

Testseite

3
Kyle

Entschuldigung, dass ich dies als Antwort geschrieben habe, anstatt einen Kommentar zum Haupt-Thread, aber ich habe anscheinend nicht genug Reputationspunkte, um einen Kommentar abzugeben!

Jedenfalls suche ich auch genau das gleiche wie das OP.

Mir ist aufgefallen, dass es eine bestimmte Bibliothek, krpano , gibt, die mit dem krpano-Videoplayer-Plugin gekoppelt ist , das die Wiedergabe von Videos auf dem iPhone INLINE ermöglicht! Einige Demos davon in Aktion finden Sie hier: http://krpano.com/video/

Während ich ein einfaches 2D-Videobeispiel gegenüber diesen verrückten Panoramavideos vorziehen würde, ist dies das nächste, das ich beim Durchsuchen des Internets gefunden habe. Soweit ich das beurteilen kann, verwenden sie ein normales Element, das nicht an das Dokument angehängt ist:

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

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

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

Videoelement vor dem Entfernen:

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

Aber das allein scheint nicht genug zu sein: Wenn das Video abgespielt wird, wird es immer noch als Vollbild angezeigt.

Wie schaffen sie es, zu verhindern, dass das Video im Vollbildmodus angezeigt wird?


BEARBEITEN: Nachdem ich beide Beispiele angesehen hatte, sah es so aus, als würden beide das Canvas-Element zum Rendern des Videos nutzen. Deshalb habe ich eine Demo erstellt, in der das Video-Rendering durch das Canvas-Element dargestellt wird. Die Demo funktioniert zwar hervorragend, liefert jedoch keine Bereitstellung auf dem iPhone (selbst wenn das Videoelement vollständig aus dem DOM entfernt ist!) - das Video springt immer noch auf Vollbild. Ich denke, der nächste Schritt wäre, die gleichen Prinzipien auf eine WebGL-Leinwand anzuwenden (so machen es die Krpano-Beispiele), aber in der Zwischenzeit wird diese Demo vielleicht in anderen Ideen Impulse geben ...

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

1
Jake