0

できないと言う前に、私の思考の流れを見て、私を楽しませてください。私はstackoverflowでそれを行うことができないことを読み、サーバー側でffmpegやその他のものを使用してこれを実装する方法を読みました..私はgithubで見つけたVideo.jsの拡張機能を使用しましたこの 1 つの手順が簡単になります。しかし、それでも、のコピーを持っていない場合はどうすればよい<video src=... >でしょうか。

私はこれを行うためにサーバーを使用したくありません。ポール・アイリッシュの投稿のおかげで、ビデオの再生は web-kit ポート (基本的にすべてのブラウザーに電力を供給するコード) の共有側面ではないことがわかりました。 .. chrome canary を差し引いて、blink a webkit fork を使用するようになりました) これは、特定のブラウザーが特定のビデオ コンテナーのみをサポートする理由を理解するのに役立ちます。

簡単にするために: この機能を Chrome と MPEG-4 AVC ビデオ コンテナーでのみ使用できるようにしたいのですが、再生中にビデオの各フレームを実際に表示できる方法があるのに、なぜこれができないのでしょうか?

追加メモ したがって、キャンバスにフレームを描画することで、ビデオのサムネイルを生成できます。これは、私の問題に対する最終的な解決策の一部にすぎません。ユーザーが最初の再生を完了した後のサーバー。私が最終的に取り組みたいのは、ビデオがダウンロードされるときにサムネイルを生成することです。これは、ユーザーがドラッグ スクロールバーを使用してビデオ内のポイントに ff/rw している間に表示できます。したがって、これは、ユーザーが表示できるようにブラウザによってレンダリングされた後ではなく、ビデオのフレームが利用可能になったときに実行する必要があります。

4

1 に答える 1

2

HTML5Doctor で見られるように、実際にビデオをキャンバスにフィードすることができます。基本的に、魔法を行う行は次のとおりです。

canvasContext.drawImage(videoElement,0,0,width,height);

次に、キャンバスからフレームを定期的に取得するタイマーを実行できます。これには2つのオプションがあります

  1. 生のピクセル データを取得する
  2. base64 でエンコードされたデータを取得する

保存に関しては、データをサーバーに送信してそのデータを使用して画像を再構築し、ディスクに保存します。また、ビデオ キャンバスの転送によってスケーリングが自動的に管理されるため、キャンバスとビデオのサイズをスクリーンショットのサイズに合わせることをお勧めします。

もちろん、これはブラウザでサポートされているビデオ形式によって制限されます。canvasとvideoのサポートと同様に。

最初のレンダリング中にサムネイルを生成しますか? 次の理由で問題が発生します。

  • ビデオ要素でレンダリングされない限り、すべてのフレームを生成することはできません。

  • 最初の実行時にサムネイルを生成し、それを以降の実行で使用したいとします。Base64 データは非常に長く、通常、画像の場合はファイル サイズの 3 倍になります。生のピクセル データ配列width x height x 4の長さです。最も実行可能なストレージの候補は localStorage で、ブラウザによってはわずか 5 ～ 10 MB です。

  • 生成された画像をブラウザのキャッシュにキャッシュする方法はありません (data-url を使用して知らないキャッシュ ハックがある可能性があります)。

代わりにサーバー上で行うことをお勧めします。クライアント側で行うには負担と手間がかかりすぎます。

于 2013-05-03T04:52:20.410 に答える