网页视频播放器的截图功能

现在很多视频网站的播放器没有截图功能，这里提供几行截图脚本，需要的网友可以试试。实现原理很简单，就是获取video元素，然后绘制到canvas元素并获取图片数据，之后下载下来。所以，这个脚本只能用于H5视频播放器，其它类型播放器无法使用。

// 这是保存图片的函数。它模拟点击链接，打开保存窗口
function download(href, name) {
	var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	save_link.href = href;
	save_link.download = name;
	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元素
var v = document.querySelector('video');
// 创建canvas元素并绘制video元素内容
var c = document.createElement('canvas');
c.width = v.videoWidth;
c.height = v.videoHeight;
c.getContext('2d').drawImage(v, 0, 0, c.width, c.height);
// 绘制后，获取图片数据并下载
c.toBlob(function(b) {
	var u = URL.createObjectURL(b);
	download(u, '1.png');
	URL.revokeObjectURL(u);
});

百度网盘和B站的播放页面都试过，可以成功截图。不知道如何运行脚本的网友，可以在浏览器内按下F12，打开调试窗口，并在控制台粘帖上面脚本，最后按下Enter运行。