Не срабатывает <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>
|
cubano,
политика безопасности, всё должно лежать на вашем сервере. https://developer.mozilla.org/ru/doc..._enabled_image |
Спасибо !!!
Заработало :) Загрузил видео файл в корневую папку, и поменял ссилки на локальные. Но, так и не понял существует ли возможность использовать видео ссилки в <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');
Не сработало. |
Цитата:
https://developer.mozilla.org/ru/doc...xt2D/drawImage Цитата:
https://developer.mozilla.org/ru/doc...D/getImageData |
| Часовой пояс GMT +3, время: 23:28. |