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

実際、私はJavaScript機能を備えたHTML5ページを持っていますので、私はwmvビデオファイルを再生できます。ビデオが再生中（一時停止中または再生中）にスナップショットを撮り、JPGまたはBMPの画像フォーマットで保存する必要があります。助けていただければ幸いです。ありがとうございます。HTML5-JavaScriptベースのビデオプレーヤーのスナップショットを取る方法は？

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

出典

2012-12-07 Ahmed MEZRI

ビデオプレーヤーで特定の瞬間のスナップショットを望んでいるのですか、フルサイズのスクリーンショットが必要ですか？ビデオプレーヤーのスクリーンショットを尋ねる場合、それはちょっと難しいかもしれませんが、スクリーンショットはhttp://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-news-take-overview.aspをご覧ください。 screenshots – aug

あなたは、現在のビデオのコピーを取り、drawImage()機能を使ってcanvas要素に格納することができます。

私はコードをVideo/canvas screenshotで見ることができる完全な例があります。その例は適切なトラックに設定する必要があります。

出典

2012-12-07 10:06:38

しかし、これはOPが彼の 'iframe'を取り除き、代わりに' video'タグを使う必要があります。それには何の問題もありません。 – Cerbrus

ビデオフレームをイメージファイルにコピーするには、ビデオを正しくロードし、イメージをキャンバスにコピーしてファイルにエクスポートする必要があります。これは完全に可能ですが、トラブルに遭遇できる場所がいくつかありますので、一度に1ステップずつ取り上げましょう。ピクセルをキャプチャするには、ビデオ

をロード

1）は、あなたが<video>タグにビデオをロードする必要はなく、iframeまたはobjectまたはembed。また、ファイルはWebサーバーから取得する必要があります。これは、Webページ自体が同じものです（cross-origin headersを使用しない限り、複雑で、ブラウザでは動作しない可能性があります）。コードはローカルファイルシステムからビデオをロードしますが、これはうまくいかないでしょう。

また、適切なファイル形式をロードする必要がありますが、IE9 +はWMVを再生する可能性があります。 multiple sources、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要素に直接配置することができます。

ファイルに保存する場合は、サーバーにアップロードする必要があります。これを行う方法はgood tutorialです。

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

出典

2012-12-07 14:46:33 brianchirls

ありがとうございます。私はちょうどYoutubeビデオのスナップショットを取るブックマークスクリプトを作成しました：[youtube-screenshot]（https://github.com/ReeganExE/youtube-screenshot） –

これはすばらしいですが、ある時点でスナップショットを取る方法ビデオで？たとえば10秒という意味です – Tomasz

<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-09 07:10:59

とてもうまく動作してくれてありがとう –

素晴らしい作品です！しかし、ビデオソースが同じサーバー上でホストされ、起点を越えていない場合にのみ機能します。しかし、あなたの解決に感謝します！ –

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

答えて

関連する問題