i'm tratando de construir un reproductor de vídeo, que funciona en todas partes. hasta ahora i'd ir con:
<video>
<source src="video.mp4"></source>
<source src="video.ogv"></source>
<object data="flowplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer.swf" />
<param name="flashvars" value='config={"clip":"video.mp4"}' />
</object>
</video>
(como se ve en varios sitios, por ejemplo video para todos) hasta ahora, todo bien.
pero ahora también quiero algún tipo de lista de reproducción/menú junto con el reproductor de vídeo, desde el que puedo seleccionar otros vídeos. estos deben abrirse dentro de mi reproductor de inmediato. así que tendré que "cambiar dinámicamente la fuente del vídeo" (como se ve en <a href="http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/"dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - sección "Let's look at another movie") con javascript. vamos'a olvidar la parte de flashplayer (y por lo tanto IE) por el momento, voy a tratar de lidiar con eso más tarde.
así que mi JS para cambiar las etiquetas <source>
debería ser algo como
<script>
function loadAnotherVideo() {
var video = document.getElementsByTagName('video')[0];
var sources = video.getElementsByTagName('source');
sources[0].src = 'video2.mp4';
sources[1].src = 'video2.ogv';
video.load();
}
</script>
el problema es que esto no funciona en todos los navegadores, concretamente en firefox =O hay una bonita página, donde se puede observar el problema que estoy teniendo: http://www.w3.org/2010/05/video/mediaevents.html
tan pronto como lanzo el método load() (en firefox, claro), el reproductor de video muere.
ahora he descubierto que cuando no utilizo múltiples etiquetas <source>
, sino un solo atributo src dentro de la etiqueta <video>
, el conjunto SÍ funciona en firefox.
así que mi plan es sólo usar ese atributo src y determinar el archivo apropiado usando la función canPlayType().
¿lo estoy haciendo mal de alguna manera o complicando las cosas?
Modernizr me ha funcionado a las mil maravillas.
Lo que hice es que no usé <source>
. De alguna manera, esto estropeó las cosas, ya que el vídeo sólo funcionó la primera vez que se llamó a load(). En su lugar utilicé el atributo source dentro de la etiqueta video -> <video src="blabla.webm" />
y utilicé Modernizr para determinar qué formato soportaba el navegador.
<script>
var v = new Array();
v[0] = [
"videos/video1.webmvp8.webm",
"videos/video1.theora.ogv",
"videos/video1.mp4video.mp4"
];
v[1] = [
"videos/video2.webmvp8.webm",
"videos/video2.theora.ogv",
"videos/video2.mp4video.mp4"
];
v[2] = [
"videos/video3.webmvp8.webm",
"videos/video3.theora.ogv",
"videos/video3.mp4video.mp4"
];
function changeVid(n){
var video = document.getElementById('video');
if(Modernizr.video && Modernizr.video.webm) {
video.setAttribute("src", v[n][0]);
} else if(Modernizr.video && Modernizr.video.ogg) {
video.setAttribute("src", v[n][1]);
} else if(Modernizr.video && Modernizr.video.h264) {
video.setAttribute("src", v[n][2]);
}
video.load();
}
</script>
Espero que esto te ayude :)
Si no quieres usar Modernizr , siempre puedes usar CanPlayType().
En lugar de hacer que el mismo reproductor de vídeo cargue nuevos archivos, por qué no borrar todo el elemento `
Ejemplo (usando Prototype):
var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });
vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });
$('container_div').update(vid);