HTML5: Manuell "spielen" ein, das video in einer Leinwand, die in IOS-Safari

So, hier ist, was ich versuche zu tun:
Ich will laden Sie ein video in ein video-element, aber habe es nicht gespielt, in den "normalen" Weg.
Mit einem festgelegten Intervall, berechnet nach dem Film die framerate, ich will auf jeden iteration zu

A. Manuell Voraus das video ein 'frame' (oder so nah wie möglich).

B. Zeichnen Sie das Bild in ein canvas.

Damit ist das video zu "spielen" innerhalb der Leinwand.

Hier einige code:

<video width="400" height="224" id="mainVideo" src="urltovideo.mp4" type="video/mp4"></video>
<canvas width="400" height="224" id="videoCanvas"></canvas>

<script type="text/javascript">

var videoDom = document.querySelector("#mainVideo");
var videoCanvas = document.querySelector("#videoCanvas");
var videoCtx = null;
var interval = null;

videoDom.addEventListener('canplay',function() {
   //The video's framerate is 24fps, so we should move one frame each 1000/24=41.66 ms
   interval = setInterval(function() { doVideoCanvas(); }, 41.66);
});

videoDom.addEventListener('loadeddata',function() {
  videoCtx = videoCanvas.getContext('2d');
});

function doVideoCanvas() {
  videoCtx.drawImage(videoDom,0,0);
  //AFAIK and seen, currentTime is in seconds
  videoDom.currentTime += 0.0416;
}

</script>

Diese funktioniert perfekt mit Google Chrome, aber es funktioniert nicht im Iphone Safari;

Die video-frames nicht gezogen, alle auf die Leinwand.

Machte ich sicher, dass:

  • Der video-Ereignisse, die ich angespannt in hat ausgelöst (hab 'Warnungen' und Sie wurden angezeigt).
  • Ich habe die Kontrolle über die Leinwand (hat eine 'fillRect", und es ist gefüllt).

[Ich habe auch versucht, die Angabe der Dimensionen in der drawImage - es hat nicht geholfen]

Ist drawImage mit einem video-Objekt nicht anwendbar auf alle im Iphone Safari...?

Selbst wenn ich es Schaffe einen Weg zu finden, zu erfassen video-frames, gibt es auch einige andere Probleme im Iphone-browser:

  • Zugang zu den currentTime - Eigenschaft des Videos wird nur erteilt, nachdem das video begonnen hat zu spielen (im standard). Ich dachte darüber nach, vielleicht irgendwie "zu spielen, es versteckt" und dann aufnehmen, aber nicht geschafft, das zu tun. Dachte auch, vielleicht irgendwie das video abzuspielen und dann sofort damit aufhören;

    Es scheint nicht zu irgendeiner Weise gewaltsam starten Sie die Wiedergabe eines Videos in die IOS-Safari. video.play() oder autoplay scheint nicht, etwas zu tun. Nur, wenn der Benutzer tippt auf die "play " Kreis" auf dem video-dann beginnt das video zu spielen (wobei alle über der Bildschirm, wie in der Regel mit videos auf dem IPhone-browser).

  • Wenn das video spielt - die currentTime Eigenschaft hat weitergeleitet bekommen. Auf dem video selbst. Wenn Sie das video auf pause und gehen Sie zurück zu der normalen html-Seite - sehen Sie die Bilder auf dem video-element ändern. Obwohl, in einer langsamen phase (im Gegensatz zu Google Chrome, wo die rate scheint glatt genug ist, um es so Aussehen, wie es zu spielen) - in der iphone-es sieht aus, um eine rate von so etwas wie 2-3 frames pro Sekunde vielleicht. Es bleibt das gleiche, auch wenn ich versuche, ändern Sie das Intervall-timing, denke ich, es gibt eine Frist, die der browser auf dem IPhone verarbeiten kann.

"Bonus-Frage" 🙂
- Wenn die Rahmen auf dem video-Elements schreitet von der Veranstaltung - der Kreis "play-button" sichtbar ist, auf das video-element (da es nicht wirklich 'spielen'). Gibt es trotzdem, es zu verbergen und machen es unsichtbar?

Dies wurde getestet auf Iphone 3GS (sowohl mit 3G und Wifi) und Iphone 4, beide mit IOS 5, beide mit dem gleichen Ergebnis wie beschrieben.

InformationsquelleAutor Yuval A. | 2012-05-30
Schreibe einen Kommentar