Первый кадр видео
Всем привет. Есть такой код:
function firstKadr(url) {
var v = document.createElement('video');
v.src = url;
v.addEventListener('loadeddata',function() {
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext("2d");
context.drawImage(this, 0, 0, 200, 200);
var dataURL = canvas.toDataURL();
console.log(dataURL);
})
}
Не могу понять почему он возвращает всегда одно и тоже пустое изображение, по идее должен возвращать первый кадр видео. Помогите пожалуйста разобраться. |
undersatanae666,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<img src="" alt="">
<script>
function firstKadr(url) {
var v = document.createElement('video'),
ogg = v.canPlayType("video/ogg");
v.addEventListener('loadeddata',function() {
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext("2d");
var self = this;
requestAnimationFrame(() => {context.drawImage(self, 0, 0, 200, 200);
var dataURL = canvas.toDataURL();
console.log(dataURL);
document.querySelector('img').setAttribute("src", dataURL)
})
})
v.setAttribute("src", url + (ogg ? ".ogg": ".mp4"));
v.load()
}
var url = 'https://www.w3schools.com/Tags/mov_bbb';
firstKadr(url)
</script>
</body>
</html>
|
тоже самое, пустой результат
|
undersatanae666,
может безопасность мешает? |
рони,
тогда наверное падало бы где то до вывода в консоль |
| Часовой пояс GMT +3, время: 10:30. |