Vidéo html5 et source multiple HD/SD

Salut à tous j'ai un petit problème de vidéo en HTML5:

je veux permettre a l'utilisateur de choisir entre SD et HD en cliquant sur un bouton.

du coup :

je charge la vidéo en SD au chargement de la page :

<video id="vid" width="640" height="480" controls="controls" preload="auto" poster="../images/banvid.png">
<source id="source" src="../video/trailerSD.mp4" type="video/mp4" />
<source id="source" src="../video/trailerSD.ogv" type="video/ogg" />

 Vous n'avez pas de navigateur moderne, donc pas de balise vidéo de HTML5! <br/>
 téléchergez en un dès maintenant...!

</video>

<br/><br/>
<input type="button" onclick="playHD();" value="HD"/>-
<input type="button" onclick="playSD();" value="SD"/>

jusque là tout va bien je vous ajoute donc le code JS des boutons :

function playHD()
{
var vid = document.getElementsByTagName('video')[0];
var source1 = document.getElementsByTagName('source')[0];
var source2 = document.getElementsByTagName('source')[1];			

vid.poster="../images/banvidHD.png";
vid.width="1280";
vid.height="720";

source1.src="../video/trailerHD.mp4";
source2.src="../video/trailerHD.ogv";

vid.load();
}

le code de playSD() est sensiblement le même avec d'autres src et d'autres dimensions pour la vidéo.

résumé du problème :

ça fonctionne partout (FireFox,Chrome,même IE9 pour changer !?!) mais ça marche pas avec Safari...
Il lit la vidéo charger de base et si je clique sur un de mes boutons il charge pas les src.
quelqu'un à une idée ?

[Edit]
En fait ça ne marche pas vraiment sur Chrome il charge la vidéo de base, puis il charge la première fois que j'appuie sur le bouton HD ou SD et après plus rien .... ;'(
[/Edit]
Modifié par Avoghai (11 Oct 2011 - 16:46)

Bon faut corriger tout ça ... alors:

function playHD()
{
var vid = document.getElementsByTagName('video')[0];
var agt=navigator.userAgent.toLowerCase();

vid.poster="../images/banvidHD.png";
vid.width="1280";
vid.height="720";

if (agt.indexOf("firefox") != -1)
{vid.src="../video/trailerHD.ogv";}
else
{vid.src="../video/trailerHD.mp4";}

vid.load();
}

Bon voila c'est peut être pas très beau mais ça marche très bien ...
si quelqu'un à une meilleur solution ...?

Deux choses:
- Peut-être utiliser WebM plutôt que du Ogg Theora?
- La détection affreuse du User Agent... Avec cette détection, qui en plus est peu précise, tu vas envoyer du MP4 (H264/AAC) à Opera qui ne le supporte pas (mais qui lit le Ogg Theora et le WebM). La solution est simple: détecter le support du codec avec la méthode canPlayType.

fvsch a écrit :
- La détection affreuse du User Agent... Avec cette détection, qui en plus est peu précise, tu vas envoyer du MP4 (H264/AAC) à Opera qui ne le supporte pas (mais qui lit le Ogg Theora et le WebM). La solution est simple: détecter le support du codec avec la méthode canPlayType.

Désolé pour ce hors-sujet, mais MP4 est un format conteneur de données multimédia générique, il n'est donc pas lié à H.264 et AAC.