1485 sujets

Web Mobile et responsive web design

bonjour,

Un problème récurrent aujourd'hui est d'assurer la compatibilité des médias comme les vidéos sur ios et les différents navigateurs mobiles !

je suis intrigué car il existe de gros problèmes de compatibilité même avec l'inclusion de vidéos youtube.

un exemple en images :

sur ce slider, si vous cliquez sur le thumbs avec le symbole en forme de vidéos et que vous cliquez sur la grosse image, la vidéo s'exécute parfaitement sur tous les navigateurs mobiles hormis chrome et IOS/safari

slider : http://themes.themepunch.com/?theme=paradigm_jq

Je serai curieux de savoir pourquoi...
	
<script type="text/javascript" src="../web/js/swfobject.js"></script>
	<script type="text/javascript">
			var flashWidth = 950; // width of the SWF
			var flashHeight = 570; // height of the SWF
			var flashvars = {};
		
			flashvars.videoURL = "http://www.youtube.com/v/hlfs16eGANk";
			
			// set here any other setting
			var params = {};

			params.allowScriptAccess = "always";
			params.allowFullScreen = "true";
			var attributes = {};
			swfobject.embedSWF("../web/components/videoflash/CustomizableVideoPlayer.swf", "video", flashWidth,
			flashHeight, "10.0.0", "../web/js/expressInstall.swf", flashvars, params, attributes);
		</script>

Modifié par phpCbien (10 Jan 2013 - 02:12)
Salut,

Euh… si tu comptes utiliser un objet Flash (or, ton exemple de code reproduit un code recourant à SWFObject) pour afficher une vidéo, c'est sûr que ça ne sera pas du tout compatible avec iOS ! Smiley lol

Bref, plus sérieusement, n'as-tu jamais entendu dire qu'Apple a décidé de ne pas prendre en charge Flash sur iOS (aussi bien sur iPhone que sur iPad) ? N'as-tu pas pensé à te pencher sur le HTML 5 et l'élément video ? Si tu n'y as pas pensé, c'en devient désespérant… Smiley sweatdrop
Si j'y ai pensé!

Mais il faudra que je passe par une détection du browser car elle n'est pas compatible partout.

Dieu que je suis con... Merci beaucoup, je me sens à nouveau à ma place ici Smiley ravi

je suis tombé sur dieu Smiley ravi

Bon edit :

Sérieux, je serais autant à la veille technologique que toi (ce qui n'est plus le cas car l'informatique fait office de passe temps pour moi aujourd'hui), je conserverai un temps soi peu plus d'humilité et arrêterai de prendre les gens de haut.

Une preuve tangible pour affirmer la thèse que le web n'est plus une passion, vient du fait que je prends le temps d'éditer un message tout à ton intention.

C'est des gens comme toi qui m'ont dalleurs donné envie de passer à autre chose, à force d'être sans cesse rabaisser.

<modération>Partie insultante supprimée.</>

Salut !
Modifié par Julien Royer (10 Jan 2013 - 09:53)
#YoutubePourTous :

<iframe class="youtube-player"  width="425" height="350" src="http://www.youtube.com/embed/opg4VGvyi3M" title="Vidéo sur youtube : Somebodies : A YouTube orchestra" >

</iframe>
<p><a href="http://www.youtube.com/watch?v=opg4VGvyi3M">Voir <cite lang="en" xml:lang="en">Somebodies&#0160;: A YouTube orchestra</cite> sur youtube</a></p>
oui !

L'autre alternative étant de soumettre la balise vidéo avec les 3 formats

mp4=>safari 4.0/safarimobile et +/chrome

ogg=>firefox et opera et chrome


<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
	<!-- MP4 must be first for iPad! -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
	<!-- fallback to Flash: -->
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<!-- fallback image. note the title field below, put the title of the video there -->
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>


ou l'autre alternative est détecter le user agent et selon :

si mobile version=>utiliser video html5

sinon utiliser swfobject2.2

exemple

détection


$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{
	$mobile=true;
	$tpl->assign('mobile',$mobile);
}


gallery.tpl

			
{if $item['video_mp4'] != ""}
			[b]{if $mobile ==true}[/b]
			<div class="video_container">
				<div class="video_container_wrap">	
				<video class="video_clip" controls="controls" width="741" height="417">
				
				<source src="../web/components/videoflash/{$item['video_mp4']}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><!-- Safari / iOS video    -->
				<source src="../web/components/videoflash/{$item['video_ogg']}" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
				<source src="../web/components/videoflash/{$item['video_webm']}" type="video/webm" />
				</video>
			{else}
				<iframe class="video_clip" src="[b]videos[/b].php?video={$item['video_mp4']}" height="417" width="741" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>

			{/if}
				<div id="close"></div>
			</div>



videos.php


<?php
require(dirname(__FILE__).'/../config/global.php');
$tpl=new Smarty();

$video=$_GET['video_name'];
$tpl->assign('video',$video);
	
$tpl->display(HTML_DIR.'/work/videos.tpl');


videos.tpl

<script type="text/javascript" src="../web/js/swfobject.js"></script>
	<script type="text/javascript">
	
		var flashWidth = 741; // width of the SWF
		var flashHeight = 341; // height of the SWF
		var attributes = {};					
		var flashvars = {};
		flashvars.videoURL= "{$video}" ;
		
		// set here any other setting
		var params = {};
		params.allowScriptAccess = "always";
		params.allowFullScreen = "true";
		
		swfobject.embedSWF("../web/components/videoflash/CustomizableVideoPlayer.swf",
		 "videotest", flashWidth,flashHeight, "9.0.0", "../web/js/expressInstall.swf",
		  flashvars, params, attributes);

	</script>
	

	<div id="videotest"></div>

Modifié par phpCbien (11 Jan 2013 - 16:33)