快照视频作为预览 [英] Snapshot video as a preview
问题描述
我在从视频中获取快照以用作标题图像时遇到问题.下面我有我目前使用的代码，但我得到的输出只是一个黑色图像.在控制台中，我没有遇到任何问题.我将视频上传到我使用的文件服务器后执行此操作.
let video = $(videoPath).find('#newVideo').get(0);let canvas = document.createElement('canvas');video.onloadedmetadata = function() {视频播放()；画布宽度 = 640;画布高度 = 480;var ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, canvas.width, canvas.height);var dataURI = canvas.toDataURL('image/jpeg');让 $previewBox = $(".post-preview-box");让 $previewCardImg = $previewBox.find(".card-img");我使用过如何拍摄基于 HTML5-JavaScript 的视频播放器的快照? 作为获取快照的基础，然后添加了一些其他东西，希望它能起作用，但到目前为止我一直无法做到.
欢迎任何有关尝试的帮助或意见.
编辑 04-03-2020(4 月 3 日):为了提供更多说明，我将从 dataURI 中添加一个控制台并对我所做的代码进行更改.
<块引用>数据:图像/JPEG; BASE64，/9J/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCACWASwDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4 + Tl5ufo6erx8vP09fb3 + PN6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3 + PN6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD//2Q ==
添加了视频的currentTime并将其设置为3(我也尝试过5).
let video = $(videoPath).find('#newVideo').get(0);let canvas = document.createElement('canvas');video.onloadedmetadata = function() {video.currentTime = 3;视频播放()；var ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, canvas.width, canvas.height);var dataURI = canvas.toDataURL('image/jpeg');让 $previewBox = $(".post-preview-box");控制台日志(数据URI)；让 $previewCardImg = $previewBox.find(".card-img");在没有看到所有代码的情况下，这里有一个获得 10 个屏幕的示例.
var screen = [];var video = document.getElementById('video');var video_preview = document.getElementById('video_preview');var loadingContainer = document.getElementById('loading-container')功能加载视频(事件){loadingContainer.style.display = 'block'屏幕 = [];var reader = new FileReader()reader.onload = function(e) {video.src = video_preview.src = e.target.result;video.autoplay = video_preview.autoplay = true;video.hasLoaded = video_preview.hasLoaded = false;video_preview.addEventListener('canplay', function() {video_preview.hasLoaded = true;视频播放()；})video.addEventListener('canplay', function() {//第一次如果(！video.hasLoaded){console.log('加载:视频时长:', this.duration, event.target.files[0].size)loadingContainer.innerText = '生成屏幕...'video.hasLoaded = true;var self = this;(函数重复(i){设置超时(函数(){var 时间戳 = ((self.duration/10) * i)/1.1;//捏造 abit 所以不要得到开始/结束帧console.log('寻求:', 时间戳)self.currentTime = 时间戳如果我) {//下一个重复(一)；} 别的 {//loadingContainer.style.display = '无'//抓取所有屏幕var str = '<div style="position:relative;width:calc(100% + .25rem)">'screen.reverse().forEach(function(screen) {str += '<img src="' + screen + '" style="width:32%" class="img-thumbnail m-1"/>';});str += '</div>';document.getElementById("screens-container").innerHTML = str;}}, 500)//尝试抓取屏幕的速度有多快})(11);//迭代，即有多少屏幕}}， 错误的);video.addEventListener('seeked', function() {console.log('抓取屏幕', this.currentTime)取屏()；}， 错误的);}reader.readAsDataURL(event.target.files[0]);}函数 takeScreen() {var 文件名 = video.src;var w = video.videoWidth;var h = video.videoHeight;var canvas = document.createElement('canvas');canvas.width = w;canvas.height = h;var ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, w, h);var data = canvas.toDataURL("image/jpg");屏幕推送(数据)loadingContainer.innerText = 'Generated ' +screens.length + ' out of 10 个屏幕...'}功能失败(e){开关(e.target.error.code){案例 e.target.error.MEDIA_ERR_ABORTED:console.log('您中止了视频播放.');休息;案例 e.target.error.MEDIA_ERR_NETWORK:console.log('网络错误导致视频下载中途失败.');休息;案例 e.target.error.MEDIA_ERR_DECODE:console.log('由于损坏问题或因为使用的视频功能您的浏览器不支持，视频播放被中止.');休息;案例 e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:console.log('视频无法加载，可能是因为服务器或网络失败，或者是因为格式不支持.');休息;默认:console.log('发生未知错误.');休息;}}body,html {边距:0；填充:0}李{显示:内联块；列表样式类型:无}.jumbotron {边距底部:1rem；}<div class="card"><div class="card-header" style="background-color: #e9ecef"><h5 class="card-title">视频预览</h5><video id="video_preview" onerror="failed(event)" controls="controls" preload="none" muted style="width: 100%"></video><video id="video" onerror="failed(event)" controls="controls" preload="none" muted style="display:none"></video><div class="card-body"><a href="javascript:void(0)" class="btn btn-sm btn-primary btn-block" onClick="$('[type=\'file\']').trigger('click')"><i class="fa fa-upload"></i>加载视频</a><form id="uploadForm" ref="uploadForm" action='/upload' method='post' enctype="multipart/form-data"><input type="file" name="file" accept="video/*" style="display: none" onchange="loadVideo(event)"></表单><div id="loading-container" style="display:none">正在加载...</div><div class="card-body"><h5 class="card-title">屏幕</h5><div id="screens-container"></div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUJOhcWr7x2Mcrossorigin="匿名"><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
更完整的例子见:https://codesandbox.io/s/clipseed-hfhee
I have an issue with getting a snapshot from a video to use as a header image. Underneath I have the code I currently use, but the output I get is only a black image. In the console I don't get any issues. I do this after I have uploaded the video to the fileserver I use.
let video = $(videoPath).find('#newVideo').get(0);
let canvas = document.createElement('canvas');
video.onloadedmetadata = function() {
video.play();
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
let $previewBox = $(".post-preview-box");
let $previewCardImg = $previewBox.find(".card-img");
I have used How to take a snapshot of HTML5-JavaScript-based video player? as a base to get a snapshot and then added some other things in the hope it would work, but so far I have been unable to do.
Any help or input on what to try is welcome.
Edit 04-03-2020 (april third): To give more clarification I will add a console out of the dataURI and changes to code I made.
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCACWASwDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD//2Q==
Added the currentTime of the video and set it to 3 (I also have tried it with 5).
let video = $(videoPath).find('#newVideo').get(0);
let canvas = document.createElement('canvas');
video.onloadedmetadata = function() {
video.currentTime = 3;
video.play();
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
let $previewBox = $(".post-preview-box");
console.log(dataURI);
let $previewCardImg = $previewBox.find(".card-img");
Without seeing all your code, here is an example which gets 10 screens.
var screens = [];
var video = document.getElementById('video');
var video_preview = document.getElementById('video_preview');
var loadingContainer = document.getElementById('loading-container')
function loadVideo(event) {
loadingContainer.style.display = 'block'
screens = [];
var reader = new FileReader()
reader.onload = function(e) {
video.src = video_preview.src = e.target.result;
video.autoplay = video_preview.autoplay = true;
video.hasLoaded = video_preview.hasLoaded = false;
video_preview.addEventListener('canplay', function() {
video_preview.hasLoaded = true;
video.play();
})
video.addEventListener('canplay', function() {
// first time
if (!video.hasLoaded) {
console.log('Loaded: video duration: ', this.duration, event.target.files[0].size)
loadingContainer.innerText = 'Generating screens...'
video.hasLoaded = true;
var self = this;
(function repeat(i) {
setTimeout(function() {
var timestamp = ((self.duration / 10) * i) / 1.1; // fudge abit so dont get start/end frames
console.log('seeking to:', timestamp)
self.currentTime = timestamp
if (--i) {
// next
repeat(i);
} else {
//
loadingContainer.style.display = 'none'
// all screens grabbed
var str = '<div style="position:relative;width:calc(100% + .25rem)">'
screens.reverse().forEach(function(screen) {
str += '<img src="' + screen + '" style="width:32%" class="img-thumbnail m-1" />';
});
str += '</div>';
document.getElementById("screens-container").innerHTML = str;
}
}, 500) // how fast to attempt to grab screens
})(11); // iterations i.e how many screens
}
}, false);
video.addEventListener('seeked', function() {
console.log('grabbing screen for', this.currentTime)
takeScreen();
}, false);
}
reader.readAsDataURL(event.target.files[0]);
}
function takeScreen() {
var filename = video.src;
var w = video.videoWidth;
var h = video.videoHeight;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
var data = canvas.toDataURL("image/jpg");
screens.push(data)
loadingContainer.innerText = 'Generated ' + screens.length + ' out of 10 screens...'
}
function failed(e) {
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
console.log('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
console.log('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
console.log('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
console.log('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
console.log('An unknown error occurred.');
break;
}
}
body,
html {
margin: 0;
padding: 0
}
li {
display: inline-block;
list-style-type: none
}
.jumbotron {
margin-bottom: 1rem;
}
<div class="container">
<div class="card">
<div class="card-header" style="background-color: #e9ecef">
<h5 class="card-title">Video Preview</h5>
<video id="video_preview" onerror="failed(event)" controls="controls" preload="none" muted style="width: 100%"></video>
<video id="video" onerror="failed(event)" controls="controls" preload="none" muted style="display:none"></video>
<div class="card-body">
<a href="javascript:void(0)" class="btn btn-sm btn-primary btn-block" onClick="$('[type=\'file\']').trigger('click')">
<i class="fa fa-upload"></i> Load Video
</a>
<form id="uploadForm" ref="uploadForm" action='/upload' method='post' enctype="multipart/form-data">
<input type="file" name="file" accept="video/*" style="display: none" onchange="loadVideo(event)">
</form>
<div id="loading-container" style="display:none">Loading...</div>
</div>
<div class="card-body">
<h5 class="card-title">Screens</h5>
<div id="screens-container"></div>
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For a more complete example see: https://codesandbox.io/s/clipseed-hfhee
这篇关于快照视频作为预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
