利用HTML5的Video進行視頻截圖並保存到本地

時間 2019-11-12

標籤利用 html5 html video 進行視頻截圖保存本地欄目 HTML5 简体版

原文原文鏈接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video視頻截圖</title>
<style>
body, h1, h2, p { margin:0; padding:0; }
html { font-family:"微軟雅黑"; background-color:#e9e9e9; }
h1 { font-size:24px; font-weight:normal; padding:20px 0; text-align:center; color:#858585; background:-webkit-linear-gradient(rgba(0, 186, 255, .8), rgba(0, 130, 255, .8)); border-bottom:1px solid #009cff; color:#FFF; margin-bottom:50px; }
video { display:block; margin:0 auto 30px auto; }
canvas { display:none; }
button { display:block; width:480px; height:50px; font-size:24px; margin:0 auto; border:1px solid #0085ff; color:#FFF; background:-webkit-linear-gradient(rgba(80, 170, 255, .8), rgba(0, 132, 255, .8)); cursor:pointer; border-radius:5px; margin-bottom:30px; }
button:hover { background:-webkit-linear-gradient(rgba(0, 132, 255, .8), rgba(80, 170, 255, .8)); border-color:#1988ff; }
h2, p { width:480px; margin:0 auto; color:#858585; }
h2 { margin-bottom:1em; font-size:18px; }
p { font-size:14px; line-height:24px; }
</style>
<script>
window.onload = function () {
  var button = document.querySelectorAll('.screen')[0];
  var video = document.querySelectorAll('video')[0];
  var canvas = document.querySelectorAll('canvas')[0];
  var ctx = canvas.getContext('2d');
  var width = 480;
  var height = 270;
    
  canvas.width = width;
  canvas.height = height;

  video.src = 'video/temp.mp4?t=' + new Date().getTime();
  video.width = width;
  video.height = height;
  video.controls = true;
  video.autoplay = true;
  video.loop = true;

  button.onclick = function () {
    ctx.drawImage(video, 0, 0, width, height);  // 將video中的數據繪製到canvas裏
    saveImage(canvas, 'screen_' + new Date().getTime() + '.png');  // 存儲圖片到本地
  };
};

function saveImage (canvas, filename) {
  var image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
  saveFile(image, filename || 'file_' + new Date().getTime() + '.png');
}

function saveFile(data, filename) {
  var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
  save_link.href = data;
  save_link.download = filename;
   
  var event = document.createEvent('MouseEvents');
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  save_link.dispatchEvent(event);
}
</script>
</head>

<body>
<h1>Video視頻截圖</h1>
<video>僅支持H264格式MP4</video>
<canvas></canvas>
<button class="screen">截圖</button>
<h2>當前，video 元素支持三種視頻格式：</h2>
<p>Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件</p>
<p>MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件</p>
<p>WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件</p>
</body>
</html>