37

実際、wmv ビデオ ファイルを再生できる JavaScript 関数を備えた HTML5 ページがあります。ビデオの再生中に (一時停止の有無にかかわらず) スナップショットを撮り、任意の画像形式 JPG または BMP で保存する必要があります。どんな助けでも感謝します。ありがとうございました。

<!DOCTYPE HTML>

    <html>
        <head>
            <title>HTML5 video</title>        
    <script type="text/javascript">
        function checkPlay() {
            var myVideo = document.getElementById("myVid");
            var ytStr = '<iframe width="500" height="500" src="C:\XA0002.wmv" frameborder="0" allowfullscreen></iframe>';
            try {
                var canPlay = document.getElementsByTagName('video')[0].canPlayType("video/wmv");
                if ((canPlay == "no") || (canPlay == "")) {
                    myVideo.innerHTML = ytStr;
                }
                new MediaElement(v, { success: function (media) { media.play(); } });
            } catch (err) {
                myVideo.innerHTML = ytStr;
            }
        }
    </script>
        </head>
        <body onload="checkPlay()">
          <div id="myVid"/>

      </body>
    </html>
4

5 に答える 5

83

ビデオ フレームを画像ファイルにコピーするには、ビデオを適切にロードし、画像をキャンバスにコピーしてファイルにエクスポートする必要があります。これは十分に可能ですが、問題が発生する可能性がある場所がいくつかあるため、一度に 1 つずつ実行してみましょう。

1) 動画の読み込み

ピクセルをキャプチャするには、またはまたは<video>ではなく、タグにビデオをロードする必要があります。また、ファイルは、Web ページ自体が存在する Web サーバーから取得する必要があります (クロスオリジン ヘッダーを使用しない限り、これは複雑で、ブラウザーで機能しない可能性があります。これは、セキュリティのためにブラウザーによって制限されています)。あなたのコードはローカル ファイル システムからビデオをロードしますが、これは機能しません。iframeobjectembed

また、適切なファイル形式をロードする必要があります。IE9+ は WMV を再生する可能性がありますが、他のブラウザーで再生できる可能性はほとんどありません。可能であれば、webm、mp4、理想的には ogg/theora を使用して、複数のソースをロードします。

var container = document.getElementById("myVid"),
    video = document.createElement('video'),
    canCapture = true;
if (!video.canPlayType('video/wmv')) {
    /* If you don't have multiple sources, you can load up a Flash fallback here
       (like jPlayer), but you won't be able to capture frames */
    canCapture = false;
    return;
}
video.src = 'myvideo.wmv';
container.appendChild(video);
video.play(); //or put this in a button click handler if you want your own controls

2) 次に、キャンバスと描画コンテキストを作成します。実際には DOM にアタッチする必要さえありませんが、結果の画像を保存するサイズに設定する必要があります。この例では、固定サイズを念頭に置いていると仮定しますが、必要に応じてビデオ サイズの倍数に設定できます。ビデオのサイズはすぐには利用できないため、ビデオの「loadedmetadata」イベント内で必ず実行してください。

var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext('2d');
// if you want to preview the captured image,
// attach the canvas to the DOM somewhere you can see it.

3) 画像をキャンバスにキャプチャし、ファイルに保存します。このコードをonclickボタンのイベントまたはタイマー内に配置します。ただし、画像がキャプチャされるタイミングを決定する必要があります。drawImage メソッドを使用します。([この記事] は、セキュリティ上の問題を含め、適切な説明を提供します。これは、ビデオと画像の場合と同じです。)

//draw image to canvas. scale to target dimensions
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

//convert to desired file format
var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'

4) 画像ファイルのエクスポート

jpg ファイルはData URIとして保存されます。これは、完全なバイナリ ファイルのエンコードされたバージョンを表す長い JavaScript 文字列です。それをどうするかはあなた次第です。imgsrc: に設定するだけで、要素に直接配置できますmyImage.src = dataUri;。

ファイルに保存したい場合は、サーバーにアップロードする必要があります。これを行う方法に関する優れたチュートリアルを次に示します。

いつものように、上記のすべては、それをサポートするブラウザーに制限されています。wmv ビデオに固執する場合は、ほとんど Internet Explorer 9+ に限定されます。6-8 は video タグも canvas もサポートしていません。さらにビデオ形式を追加できる場合は、Firefox (3.5+) と Chrome を使用できます。

于 2012-12-07T14:46:33.900 に答える
18 
<html>
<body>

  <video controls>
    <source src="C:/Users/ganesha/Desktop/Aararum.mp4" type="video/mp4"></source>
  </video>
  <canvas id="canvas" width="640" height="480"></canvas>
  <button id="snap" onclick="snap()">Snap Photo</button>

  <!-- start the script ... within that declare variables as follows... -->
  <script>
  var video=document.querySelector('video');
  var canvas=document.querySelector('canvas');
  var context=canvas.getContext('2d');
  var w,h,ratio;

  //add loadedmetadata which will helps to identify video attributes

  video.addEventListener('loadedmetadata', function() {
    ratio = video.videoWidth/video.videoHeight;
    w = video.videoWidth-100;
    h = parseInt(w/ratio,10);
    canvas.width = w;
    canvas.height = h;
  },false);

  function snap() {
    context.fillRect(0,0,w,h);
    context.drawImage(video,0,0,w,h);
  }
  </script>

</body>
</html>
于 2013-04-09T07:10:59.380 に答える
13

関数を使用して、現在のビデオのコピーを取り、それをキャンバス要素に保存できdrawImage()ます。

私はあなたが正しい軌道にあなたを設定するはずのビデオ/キャンバスのスクリーンショットであなたが見ることができるコードの完全な例を持っています。

于 2012-12-07T10:06:38.103 に答える
-3

最初にキャンバス タグに含まれるビデオ マッシュ。

このような;

<canvas id="target-canvas">
    <video id="video-for-thumbs" autoplay src="http://.....></video> 
</canvas>

そしてjsはこのように

setTimeout(function(){
    var canvas=$('#target-canvas')[0];
    canvas.getContext('2d').drawImage($('#video-for-thumbs')[0],0,0,1000,300);
    var f=canvas.toDataURL();
    console.log(f);

},200);

データは base64 でレンダリングされます

ビデオの途中でフレームを取得したい場合は、遅延時間を増やして js を実行できます。

加えて

再生速度を追加してビデオの速度を上げ、サムネイルのためだけにスクリーンショットの待ち時間を短縮できます

$('#video-for-thumbs')[0].playbackRate=9;
于 2018-10-02T17:54:09.260 に答える