Embed universel



Un script qui fonctionne avec votre navigateur et sur iPhone et iPad
"audio video javascript"

Ce script permet d'encapsuler des fichiers audio et vidéo, lisible par Flash sur un navigateur Web et est compatible Iphone et iPad.

Cliquer ici pour voir l'exemple

Tout d'abord il faut reconnaitre quel est l'apareil qui visite votre site WEB.
Le script suivant est à placé dans le header de votre page HTML :
var agent=navigator.userAgent.toLowerCase();
if (((agent.indexOf('iphone')!=-1)) || ((agent.indexOf('ipod')!=-1)) || ((agent.indexOf('ipad')!=-1))){
var is_iphone = true
};
if ((agent.indexOf('ipad')!=-1)){
var is_ipad = true
}

J'utilise pour cela deux variables : is_ipad et is_iphone :
La variable is_iphone est true si c'est un iPhone ou un iPod qui est reconnu.
La variable is_ipad est true si c'est un iPad.
La fonction suivante permet en fonction de l'appareil reconnu d'encapsuler les fichiers audio et vidéo de manières différentes :
iPad : Le nouveau tag video est utilisé.
iPhone : Je n'utilise pas le tag video car sur iPhone il est préférable pour des raisons de visibilité de faire le lien sur une image. ATTENTION le lien vers votre film est relatif à l'image et non à la page WEB.
Autres (ordinateurs) : Encapsulation d'un lecteur Flash. Dans cet exemple j'utilise le lecteur JW Player

Cette fonction permet de jouer des fichiers audio et video.

function writeEmbed(whichFile,whichWidth,whichHeight){	
	if(is_ipad){		
		if (!whichHeight){
			myEmbed = "<audio src='" + whichFile + "' controls='controls'></audio>";}
			else{
			myEmbed = "<video width='"+ whichWidth + "' height='" + whichHeight +"' controls='controls'><source src='" + whichFile + "' type='video/mp4'></source></video>";};
		}else{
			if(is_iphone){
				myEmbed= "<embed href='" + whichFile +"' type='video/x-m4v' src='play_button.png' target='myself' height='84' width ='84' scale='1' />";
				}else{
				
			if (!whichWidth){whichWidth='320'};
			if (!whichHeight){whichHeight='20'};
			if (whichHeight!='20'){full="<param name='allowfullscreen' value='true' />"}else{full=''};
			
			myEmbed = "<object data='flvplayer.swf' height='"+ whichHeight + "' type='application/x-shockwave-flash'  width='"+ whichWidth +"'>"+full+"<param name='flashvars' value='&amp;file=" + whichFile +"&amp;height=" +whichHeight+"&amp;width="+whichWidth+"' /><param name='src' value='flvplayer.swf' /></object>";
					}		
	}
	return myEmbed;
}

Pour appeler la fonction deux possibilités :
Pour un fichier audio inutile de préciser les dimensions
Par contre pour que le script reconnaisse un fichier vidéo vous devez indiquer les dimensions du film.

<h3>VIDEO</h3>
<script type="text/javascript">
document.write(writeEmbed('clip.mp4','320','240'));
</script>

<h3>AUDIO</h3>
<script type="text/javascript">
document.write(writeEmbed('audio.mp3'));
</script>

Voilà la totalité du script à copier.
Dans cette version je part du principe que tous les fichiers (flvpayer.swf, play_button.png et les fichiers audio et vidéo) sont dans le même dossier que la page HTML.

<script type='text/javascript'><!--
var agent=navigator.userAgent.toLowerCase();
if (((agent.indexOf('iphone')!=-1)) || ((agent.indexOf('ipod')!=-1)) || ((agent.indexOf('ipad')!=-1))){
var is_iphone = true
};
if ((agent.indexOf('ipad')!=-1)){
var is_ipad = true
};

function writeEmbed(whichFile,whichWidth,whichHeight){	
	if(is_ipad){
				if (!whichHeight){
				myEmbed = "<audio src='" + whichFile + "' controls='controls'></audio>";}
				else{
					myEmbed = "<video width='"+ whichWidth + "' height='" + whichHeight +"' controls='controls'><source src='" + whichFile + "' type='video/mp4'></source></video>";};
		}else{
				if(is_iphone){
				myEmbed= "<embed href='" + whichFile +"' type='video/x-m4v' src='play_button.png' target='myself' height='84' width ='84' scale='1' />";
				}else{				
				if (!whichWidth){whichWidth='320'};
				if (!whichHeight){whichHeight='20'};
			if (whichHeight!='20'){full="<param name='allowfullscreen' value='true' />"}else{full=''};
			
			myEmbed = "<object data='flvplayer.swf' height='"+ whichHeight + "' type='application/x-shockwave-flash'  width='"+ whichWidth +"'>"+full+"<param name='flashvars' value='&amp;file=" + whichFile +"&amp;height=" +whichHeight+"&amp;width="+whichWidth+"' /><param name='src' value='flvplayer.swf' /></object>";
					}				
	}
	return myEmbed;
}
//-->
</script>