如何拍攝基於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-截圖 – aug

您可以使用drawImage()函數獲取當前視頻的副本並將其存儲在畫布元素中。

我有一個完整的例子，你可以在Video/canvas screenshot上查看它的代碼，這應該讓你在正確的軌道上。

來源

2012-12-07 10:06:38

但是，這將需要OP擺脫他的'iframe'，並使用'video'標籤代替。不是說這有什麼不妥，相反，只是指出來。 – Cerbrus

將視頻幀複製到圖像文件涉及正確加載視頻，將圖像複製到畫布並將其導出到文件。這是完全可能的，但是有幾個地方你可能會遇到麻煩，所以讓我們一次一步。

1）加載視頻

要捕獲的像素，您需要將視頻加載到<video>標籤，而不是iframe或object或embed。這個文件需要來自一個網頁服務器，它與網頁本身是一樣的（除非你使用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字符串，表示完整的二進制文件的編碼版本。這取決於你如何處理它。您可以將其直接放置到img元素中，只需將其設置爲src：myImage.src = dataUri;即可。

如果你想將它保存到一個文件，你幾乎需要將它上傳到服務器。以下是關於如何做到這一點的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的視頻播放器的快照？

回答

相關問題