Форум

undersatanae666 · #1 (**permalink**) 25.11.2019, 09:22

Всем привет. Есть такой код:

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

Не могу понять почему он возвращает всегда одно и тоже пустое изображение, по идее должен возвращать первый кадр видео. Помогите пожалуйста разобраться.

рони · #2 (**permalink**) 25.11.2019, 10:04

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 · #3 (**permalink**) 25.11.2019, 11:03

тоже самое, пустой результат

рони · #4 (**permalink**) 25.11.2019, 11:17

undersatanae666,
может безопасность мешает?

undersatanae666 · #5 (**permalink**) 25.11.2019, 12:19

рони,
тогда наверное падало бы где то до вывода в консоль

Форум

Справочник

Discord чат

Курсы javascript