problema con canvas en IE

campos22ale · #1 (**permalink**) 08/05/2014, 12:20

Funciona en Chrome y Firefox pero no en IE. Tengo la version 11

Código HTML:

Ver original<p>Video to use:</p>
<video id="video1" controls width="270" >
    <source src="videos/Chrome_ImF.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="videos/Chrome_ImF.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
<video id="video1" controls width="270" >
    <source src="videos/mov_bbb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="videos/mov_bbb.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
 
<p>Canvas</p>
 
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"></canvas>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"></canvas>

Código Javascript:

Ver originalvar canvas=document.getElementsByTagName("canvas");
    var v=document.getElementsByTagName("video");   
    var ctx;    
        
    
    document.getElementById("video1").addEventListener('loadeddata', function(){
 
        for (var i=0;i<v.length;i++){   
            ctx=canvas[i].getContext('2d');
            ctx.drawImage(v[i],5,5,260,125);
        }
 
    },false);

PHPeros · #2 (**permalink**) 09/05/2014, 08:28

Seguramente se te haya olvidado añadir la declaración de !DOCTYPE al principio del documento html:

Código HTML:

Ver original<!DOCTYPE html>

campos22ale · #3 (**permalink**) 12/05/2014, 08:16

Cita:

Iniciado por PHPeros

Seguramente se te haya olvidado añadir la declaración de !DOCTYPE al principio del documento html:

Código HTML:

Ver original<!DOCTYPE html>

Lamentablemente no.

No se porque puede ser

jp91 · #4 (**permalink**) 13/05/2014, 18:57

Mira la consola algun error? Puede ser el formato de video

campos22ale · #5 (**permalink**) 16/05/2014, 08:49

Cita:

Iniciado por jp91

Mira la consola algun error? Puede ser el formato de video

No hay error y subí los formatos mp4 y ogv. Los videos funcionan pero no se forman las imagenes en el canvas

jp91 · #6 (**permalink**) 16/05/2014, 16:03

Ah ok el video esta reproduciendo pero todo esta en blanco , ese problema lo lei en IE9 y tiene que ver con sincronizacion "sync" en el evento play del video dibuja el canvas.

campos22ale · #7 (**permalink**) 17/05/2014, 12:11

Cita:

Iniciado por jp91

Ah ok el video esta reproduciendo pero todo esta en blanco , ese problema lo lei en IE9 y tiene que ver con sincronizacion "sync" en el evento play del video dibuja el canvas.

No entiendo, entonces cual es el problema?

campos22ale · #8 (**permalink**) 17/05/2014, 13:56

En la consola ahora veo que si me marca un error en el html:
HTML1506: Token inesperado.

El error es la linea donde inserto el script que dibuja el canvas, después de que cierro la etiqueta body.

</body>
<script src="js/canvas.js"></script>
</html>

jp91 · #9 (**permalink**) 20/05/2014, 11:22

Estas cargando el archivo js fuera del body??? interesante...