一個簡單的例子展示瞭如何從影片中捕捉靜止影像。下面來看看
假設你有下面的HTML程式碼:
<video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <p id="output"></p>
然後,當使用者點擊「捕捉」按鈕,我們將目前的影片內容寫入到一個畫布,並使用在畫布上顯示圖像。
(function() { "using strict"; var $video, $output; var scale = 0.25; var initialize = function() { $output = $("#output"); $video = $("#video").get(0); $("#capture").click(captureImage); }; var captureImage = function() { var canvas = document.createElement("canvas"); canvas.width = $video.videoWidth * scale; canvas.height = $video.videoHeight * scale; canvas.getContext('2d') .drawImage($video, 0, 0, canvas.width, canvas.height); var img = document.createElement("img"); img.src = canvas.toDataURL(); $output.prepend(img); }; $(initialize); }());
【相關推薦】
1. 免費h5線上影片教學
2. HTML5 完整版手冊
#以上是利用HTML5 從影片中擷取靜止影像實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!