11548 sujets

JavaScript, DOM et API Web HTML5

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)

<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>
Je viens de rajouter un fichier .htaccess a la racine avec ça dedans :

  AddType video/mp4 .mp4
  AddType video/ogg .ogv
  AddType video/webm .webm
  


Mais aucun changement Smiley decu
Bonsoir Lokomass,

Je te propose, carrément de changer de lecteur, celui la est pas mal du tout, je devrais bientôt l'essayer :

http://videojs.com/#download

il support les navigateurs les plus utilisés (dont ie 6 !!!), qu'en penses tu ?

tiens moi au jus, je le ferais aussi de mon coté dès le lecteur installé

bon code
salut
2 pistes qui ont marché pour moi :

- pour le fallback en flash, il faut mettre le fichier flashmediaelement.swf au même endroit que ton fichier html (ou php) sur ton serveur.

- le fichier js à utiliser est : mediaelement-and-player.min.js (tu as bien la dernière version ?)

Hope it helps !