6

だから、私がやろうとしていることは次のとおりです。ビデオをビデオ要素にロードしたいのですが、「通常の」方法で再生したくありません。映画のフレームレートに従って計算された時間間隔を使用して、各反復で

A. ビデオを手動で 1 'フレーム' 進めます (またはそれにできるだけ近づけます)。
B. そのフレームをキャンバスに描画します。

これにより、ビデオがキャンバス内で「再生」されます。

ここにいくつかのコードがあります：

<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>

これは Google Chrome では完全に機能しますが、Iphone の Safari では機能しません。
ビデオ フレームはキャンバスにまったく描画されません。

私はそれを確認しました：

  • 私がフックしたビデオイベントはトリガーされます（「アラート」を実行し、それらが表示されました）。
  • キャンバスを制御できます (' fillRect' を実行すると塗りつぶされます)。

[drawImage で寸法を指定してみましたが、役に立ちませんでした] Iphone Safari ではビデオ オブジェクトはまったく適用できません...
?drawImage

ビデオ フレームをキャプチャする方法を見つけることができたとしても、iPhone のブラウザには他にもいくつかの問題があります。

  • ビデオのプロパティへのアクセスcurrentTimeは、ビデオの再生が (標準的な方法で) 開始された後にのみ許可されます。どうにかして「隠しプレイ」してからキャプチャすることも考えましたが、うまくいきませんでした。また、何らかの方法でビデオの再生を開始し、すぐに停止することも考えられます。
    IOS Safari でビデオの再生を強制的に開始する方法はないようです。video.play()、またはautoplay何もしていないようです。ユーザーがビデオの「再生サークル」をタップした場合にのみ、ビデオの再生が開始されます (通常、iPhone のブラウザのビデオと同様に、画面全体に表示されます)。

  • ビデオが再生されると、currentTimeプロパティは転送されます。ビデオ自体について。動画を一時停止して通常の HTML ページに戻ると、動画要素のフレームが変化しているのがわかります。ただし、遅い段階では (Google Chrome とは異なり、再生しているように見えるほどレートが滑らかに見えます)、iPhone では 1 秒あたり 2 ～ 3 フレームのようなレートになるようです。間隔のタイミングを変えてみても変わらないのですが、iPhoneのブラウザが処理できる最小時間制限があるのでしょう。

「ボーナス質問」 :) - ビデオ要素のフレームがイベントから進行すると、ビデオ要素に円の「再生ボタン」が表示されます (実際には「再生」されていないため)。それを隠して見えないようにする方法はありますか？

これは、IOS 5 を実行する Iphone 3GS (3G と Wi-Fi の両方) と Iphone 4 でテストされており、どちらも説明と同じ結果が得られています。

4

2 に答える 2

1

残念ながら、これをテストするためのiOSデバイスはありませんが、プロパティを使用しようとしている方法で実際にビデオフレームをキャプチャする必要はないと思いますcurrentTime。通常のプロセスは次のようになります。

  1. コントロールなしでビデオ要素を作成します（属性を省略しcontrolsます）
  2. 要素を非表示にする
  3. ビデオの再生中に、一定の間隔でキャンバスに描画します

お気づきのとおり、iOSデバイスはHTML5ビデオ（または実際にはオーディオ）の自動再生をサポートしていませんが、このplay()メソッドを使用してビデオの再生を開始するための別のコントロールを作成できます。

このアプローチでは、実際にビデオを再生しているため、再生ボタンが表示されているという問題が解決するはずです。

于 2012-05-30T09:57:43.097 に答える