Video視頻截圖

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; }

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 = 'movie.mp4?t=' + new Date().getTime();

video.width = width;

video.height = height;

video.autoplay = true;

video.loop = true;

button.onclick = function () {

ctx.drawImage(video, 0, 0, width, height); // 將video中的數(shù)據(jù)繪制到canvas里

saveImage(canvas, 'screen_' + new Date().getTime() + '.png'); // 存儲(chǔ)圖片到本地

};

};

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) {

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);

}

Video視頻截圖

僅支持H264格式MP4

截圖

當(dāng)前，video 元素支持三種視頻格式：

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

總結(jié)

以上是生活随笔為你收集整理的js截屏 video_用原生JS和html5进行视频截图并保存到本地的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。