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>