Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2021, 21:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

cubano,
политика безопасности, всё должно лежать на вашем сервере.
https://developer.mozilla.org/ru/doc..._enabled_image
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2021, 09:38
Интересующийся
Отправить личное сообщение для cubano Посмотреть профиль Найти все сообщения от cubano
 
Регистрация: 18.09.2016
Сообщений: 20

Спасибо !!!
Заработало
Загрузил видео файл в корневую папку, и поменял ссилки на локальные.

Но, так и не понял существует ли возможность использовать видео ссилки в <canvas> из других источников. ( Уж. оч для меня все запутано с етими <canvas>). В документации наведен пример с image, а как быть с видео так и не понял.
Попробовал добавить строку
v.crossOrigin = "Anonymous";


document.addEventListener('DOMContentLoaded', function(){

    var v = document.getElementById('v');
    v.crossOrigin = "Anonymous";

    var canvas = document.getElementById('c');

    var context = canvas.getContext('2d');

    var back = document.createElement('canvas');

    var backcontext = back.getContext('2d');


Не сработало.

Последний раз редактировалось cubano, 09.01.2021 в 09:40.
Ответить с цитированием
  #4 (permalink)  
Старый 09.01.2021, 10:24
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,313

Сообщение от cubano
В документации наведен пример с image, а как быть с видео так и не понял.
Функция drawImage может переносить изображение в canvas из различных источников, в том числе и из <video>
https://developer.mozilla.org/ru/doc...xt2D/drawImage

Сообщение от cubano
Не сработало.
Ну сервер, на котором размещено видео, либо дает разрешение, либо нет. drawImage сработает, нарисует на canvas. А вот получить это изображение с помощью getImageData уже не получится
https://developer.mozilla.org/ru/doc...D/getImageData
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таймер срабатывает раньше времени или вообще не срабатывает Terebonko Элементы интерфейса 6 03.08.2017 12:43
document.querySelector - не срабатывает, когда много html-кода mav1 Events/DOM/Window 1 28.05.2016 21:15
onclick срабатывает со 2 раза в ie djonA Общие вопросы Javascript 19 24.03.2013 23:07
AJAX запрос в Internet Explorer срабатывает через раз nikolayseo jQuery 5 12.11.2012 22:13
Нажатие по дате в календаре срабатывает только со второго клика afr0 Events/DOM/Window 4 31.10.2012 11:39