Показать сообщение отдельно
  #1 (permalink)  
Старый 08.01.2021, 21:34
Интересующийся
Отправить личное сообщение для cubano Посмотреть профиль Найти все сообщения от cubano
 
Регистрация: 18.09.2016
Сообщений: 20

Не срабатывает <canvas>
Здравствуйте !!!
Подскажите плз ...

вот страница примера где по нажатию на кнопку воспроизведения
появляется <canvas>

http://html5doctor.com/demos/video-c...gic/demo2.html

Я сохранил ету страницу на пк и изменил ссилки на видео https://....
Но открывая ету страницу с пк просто воспроизводится видео, а <canvas>
не запускается !!!

вот код:

<!DOCTYPE html>
<!-- saved from url=(0058)http://html5doctor.com/demos/video-canvas-magic/demo2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Video/Canvas Demo 2</title> 
<script> 
document.addEventListener('DOMContentLoaded', function(){
	var v = document.getElementById('v');
	var canvas = document.getElementById('c');
	var context = canvas.getContext('2d');
	var back = document.createElement('canvas');
	var backcontext = back.getContext('2d');
 
	var cw,ch;
 
	v.addEventListener('play', function(){
		cw = v.clientWidth;
		ch = v.clientHeight;
		canvas.width = cw;
		canvas.height = ch;
		back.width = cw;
		back.height = ch;
		draw(v,context,backcontext,cw,ch);
	},false);
 
},false);
 
function draw(v,c,bc,w,h) {
	if(v.paused || v.ended)	return false;
	// First, draw it into the backing canvas
	bc.drawImage(v,0,0,w,h);
	// Grab the pixel data from the backing canvas
	var idata = bc.getImageData(0,0,w,h);
	var data = idata.data;
	// Loop through the pixels, turning them grayscale
	for(var i = 0; i < data.length; i+=4) {
		var r = data[i];
		var g = data[i+1];
		var b = data[i+2];
		var brightness = (3*r+4*g+b)>>>3;
		data[i] = brightness;
		data[i+1] = brightness;
		data[i+2] = brightness;
	}
	idata.data = data;
	// Draw the pixels onto the visible canvas
	c.putImageData(idata,0,0);
	// Start over!
	setTimeout(draw,20,v,c,bc,w,h);
}
</script> 
 

 
</head><body><video id="v" controls="" loop=""> 
	<source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" type="video/webm"> 
	<source src="http://html5doctor.com/demos/video-canvas-magic/video.ogg" type="video/ogg"> 
	<source src="http://html5doctor.com/demos/video-canvas-magic/video.mp4" type="video/mp4"> 
</video> 
<canvas id="c" width="480" height="360"></canvas> 
 
<style> 
#c {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -180px 0 0 20px;
}
 
#v {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -180px 0 0 -500px;
}
</style> </body></html>
Ответить с цитированием