js+HTML5實(shí)現(xiàn)視頻截圖的方法

更新時(shí)間：2015年06月16日 12:18:23 作者：紅薯

這篇文章主要介紹了js+HTML5實(shí)現(xiàn)視頻截圖的方法,涉及javascript操作html5元素實(shí)現(xiàn)多媒體文件截圖的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了js+HTML5實(shí)現(xiàn)視頻截圖的方法。分享給大家供大家參考。具體如下：

1. HTML部分：

<video id="video" controls="controls">
  <source src=".mp4" />
</video>
<button id="capture">Capture</button>
<div id="output"></div>

2. 點(diǎn)擊按鈕時(shí)觸發(fā)如下代碼：

(function() {
  "use 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);      
}());

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)遮罩層彈出框的方法
這篇文章主要介紹了js實(shí)現(xiàn)遮罩層彈出框的方法,可實(shí)現(xiàn)對(duì)遮罩層彈出框的樣式定義、按鈕事件及相關(guān)功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
js驗(yàn)證真實(shí)姓名與身份證號(hào)是否匹配
使用javascript技術(shù)驗(yàn)真實(shí)姓名，要用到unicode字符來(lái)匹配，由于中國(guó)人的姓名長(zhǎng)度一般是在2-4這個(gè)范圍內(nèi)，所以重復(fù)匹配{2,4}次。接下來(lái)，通過(guò)本文給大家分享js驗(yàn)證省份證號(hào)與真實(shí)姓名是否匹配，需要的朋友可以參考下
2015-10-10
js 限制input只能輸入數(shù)字、字母和漢字等等
js 限制input只能輸入數(shù)字小數(shù)點(diǎn)也不能輸入或者是只能輸入數(shù)字,能輸小數(shù)點(diǎn)等等，本文大致整理了一些，感興趣的朋友可以收藏下
2013-12-12
基于cornerstone.js的dicom醫(yī)學(xué)影像查看瀏覽功能
這篇文章主要介紹了基于cornerstone.js的dicom醫(yī)學(xué)影像查看瀏覽功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-07-07
新手快速入門微信小程序組件庫(kù) iView Weapp
這篇文章主要介紹了新手快速入門微信小程序組件庫(kù) iView Weapp，iView Weapp 提供了與 iView 一致的 UI 和盡可能相同的接口名稱，大幅度降低了學(xué)習(xí)成本，是一套一套高質(zhì)量的微信小程序 UI 組件庫(kù),需要的朋友可以參考下
2019-06-06
bootstrap table表格客戶端分頁(yè)實(shí)例
這篇文章主要為大家詳細(xì)介紹了bootstrap table表格客戶端分頁(yè)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
使用typescript快速開(kāi)發(fā)一個(gè)cli的實(shí)現(xiàn)示例
這篇文章主要介紹了使用typescript快速開(kāi)發(fā)一個(gè)cli的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
layui清除radio的選中狀態(tài)實(shí)例
今天小編就為大家分享一篇layui清除radio的選中狀態(tài)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Actionscript與javascript交互實(shí)例程序(修改)
這篇文章主要介紹了Actionscript與javascript交互實(shí)例程序(修改)的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例
本篇文章主要介紹了微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03