Je dois intégrer des vidéos sur mon site internet. J'ai donc décidé de trouver un lecteur en html5 pour intégrer mes vidéos. Je suis tourné vers : http://praegnanz.de/html5video/p_mediaelementjs.php
Cette vidéo est lue depuis tous mes navigateurs dans toutes leurs versions.
J'ai donc repris le code de cette page qui intègre la vidéo. J'ai encodé mes vidéos avec Miro Encodeur en mp4, webm et ogv.
Sur mon site, j'ai 5 vidéos que je charge au démarrage et affiche lorsque l'utilisateur clique sur le titre de la vidéo. J'ai donc créer 5 pages appelées vidéo1.html .... video5.html qui sont appelées grâce à un "php include". Jusque là tout va bien.
Le problème est que le lecteur ne s'affiche pas sur tous les navigateurs :
- IE7 par exemple, rien du tout alors que la page ci-dessus fonctionne sans soucis.
- Firefox à mon bureau (version 8 sous XP) affiche la vidéo (sans la lire)
- IE9 chez moi affiche la vidéo mais au moment de la lire affiche un point blanc
- Chrome lit la vidéo
- Safari lit la vidéo chez moi sous seven, mais pas à mon bureau sous xp (page noire au lieu de la vidéo) alors qu'il sont en même version 5.1 !!
Bref, je commence à plus rien y comprendre à cette histoire. Ah et oui, petit point amusant, mon iPhone lit sans problème toutes les vidéos...
Voici le code du lecteur (videoX.html)
Cette vidéo est lue depuis tous mes navigateurs dans toutes leurs versions.
J'ai donc repris le code de cette page qui intègre la vidéo. J'ai encodé mes vidéos avec Miro Encodeur en mp4, webm et ogv.
Sur mon site, j'ai 5 vidéos que je charge au démarrage et affiche lorsque l'utilisateur clique sur le titre de la vidéo. J'ai donc créer 5 pages appelées vidéo1.html .... video5.html qui sont appelées grâce à un "php include". Jusque là tout va bien.
Le problème est que le lecteur ne s'affiche pas sur tous les navigateurs :
- IE7 par exemple, rien du tout alors que la page ci-dessus fonctionne sans soucis.
- Firefox à mon bureau (version 8 sous XP) affiche la vidéo (sans la lire)
- IE9 chez moi affiche la vidéo mais au moment de la lire affiche un point blanc
- Chrome lit la vidéo
- Safari lit la vidéo chez moi sous seven, mais pas à mon bureau sous xp (page noire au lieu de la vidéo) alors qu'il sont en même version 5.1 !!
Bref, je commence à plus rien y comprendre à cette histoire. Ah et oui, petit point amusant, mon iPhone lit sans problème toutes les vidéos...
Voici le code du lecteur (videoX.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="includes/scripts/jquery.js"></script>
<script src="includes/scripts/mediaelement.js"></script>
<link rel="stylesheet" href="styles/mediaelement.css"/>
</head>
<body>
<video width="740" height="555" id="video1" poster="videos/copainsfou1/copainsfou1.png" controls="controls" preload="yes">
<source type="video/mp4" src="videos/copainsfou1/copainsfou1.mp4" />
<source type="video/webm" src="videos/copainsfou1/copainsfou1.webm" />
<source type="video/ogg" src="videos/copainsfou1/copainsfou1.ogv" />
<object width="740" height="555" type="application/x-shockwave-flash" data="includes/players/flashmediaelement.swf">
<param name="movie" value="includes/players/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&poster=videos/copainsfou1/copainsfou1.png&file=videos/copainsfou1/copainsfou1.mp4" />
<img src="videos/copainsfou1/copainsfou1.png" width="740" height="555" title="No video playback capabilities" />
</object>
</video>
<script>
$('audio,video').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
<script>
$('#stopall').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>
</body>
</html>