web-dev-qa-db-ja.com

HTML5 JavaScriptベースのビデオプレーヤーのスナップショットを撮る方法は？

実際、私は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>
javascripthtml5webhtml5-videosnapshot
25
Ahmed MEZRI

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

1）ビデオをロードする

ピクセルをキャプチャするには、iframeまたはobjectまたはembedではなく、<video>タグにビデオをロードする必要があります。また、ファイルはWebサーバーから取得する必要があります。WebサーバーはWebページ自体と同じものです（ cross-Origin headers を使用している場合を除きます）。セキュリティ上の理由でブラウザによって制限されています。コードはローカルファイルシステムからビデオをロードしますが、動作しません。

また、適切なファイル形式をロードする必要があります。 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文字列です。それをどうするかはあなた次第です。 src：myImage.src = dataUri;に設定するだけで、img要素に直接配置できます。

ファイルに保存したい場合は、ほとんどサーバーにアップロードする必要があります。ここに 良いチュートリアル があります。

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

57
brianchirls
<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>
14
Sijin Parambath

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

ビデオ/キャンバスのスクリーンショット で表示できるコードの完全な例があります。

11
Ian Devlin
Sample code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

</head>
<body>
<h2>Upload,Save and Download video </h2>
<form method="POST" action="" enctype="multipart/form-data">
<input type="file" name="video" id="upload"/>
</...>

<script>
var input = document.getElementById('upload');

input.addEventListener('change', function(event){
var file = this.files[0];
var url = URL.createObjectURL(file);

var video = document.createElement('video');
video.src = url;

var snapshot = function(){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    var img_data = canvas.toDataURL('image/jpg');
    var filename = file.name;
    var filename = filename.split('.').slice(0, -1).join('.');



    document.getElementById("thumb").value = filename;
    $.post("thumb-saver.php", { 
        base:img_data, 
        output:"thumbnails/"+ filename +  '.jpg'
    }, function( data ) {
            //alert(data);
    });

    video.removeEventListener('canplay', snapshot);
 };

video.addEventListener('canplay', snapshot);
});
</script>
0
Chirag Patel