i'estou a tentar construir um leitor de vídeo, que funciona em todo o lado. até agora i'estaria a ir com:
<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 visto em vários sítios, por exemplo vídeo para todos) até agora, tudo bem.
mas agora também quero algum tipo de playlist/menu juntamente com o leitor de vídeo, a partir do qual posso seleccionar outros vídeos. estes devem ser abertos dentro do meu leitor imediatamente. portanto terei de "mudar dinamicamente a fonte do vídeo" (como visto em dev.opera.com/articles/everyththing-you-need-to-know-html5-video-audio/ - secção "Let's look at another film") com javascript. let's forget about the flashplayer (and thus IE) part for the moment being, irei tentar lidar com isso mais tarde.
por isso o meu JS para alterar as etiquetas <fonte>
deve ser algo do género:
<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>
O problema é que isto não funciona em todos os navegadores, nomeadamente, firefox =O há uma página agradável, onde pode observar o problema i'm tendo: http://www.w3.org/2010/05/video/mediaevents.html
assim que eu activar o método load() (em firefox, atenção), o leitor de vídeo morre.
agora descobri que quando não utilizo'não utilizo múltiplos <source>
tags, mas apenas um atributo src dentro da tag <video>
tag, a coisa toda funciona em firefox.
por isso o meu plano é apenas usar esse atributo src e determinar o ficheiro apropriado usando o canPlayType() function.
estou a fazê-lo mal de alguma forma ou a complicar as coisas?
Modernizr funcionou como um encanto para mim.
O que fiz foi que não utilizei't usei <fonte>``. De alguma forma isto estragou tudo, uma vez que o vídeo só funcionou na primeira vez que foi chamado de "load()". Em vez disso, utilizei o atributo da fonte dentro da etiqueta de vídeo ->
` e utilizei Modernizr para determinar que formato o navegador suportava.
<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>
Esperemos que isto o ajude :)
Se não quiser usar Modernizr , pode sempre usar CanPlayType().
Em vez de obter o mesmo leitor de vídeo para carregar novos ficheiros, porque não apagar todo o elemento <video>
e recriá-lo. A maioria dos browsers irá carregá-lo automaticamente se os src's estiverem correctos.
Exemplo (usando Protótipo):
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);