jueves, 9 de junio de 2011

Jquery mostrar ver videos en todos los navegadores (firefox o IE) y en moviles esto si es crossbrowsing

Existe varios plugins jQuery con los que podemos ver videos en cualquier navegador ya sea firefox o IE en casi todas las versiones y el resto de navegadores, el funcionamiento de este plugin consiste en detectar el navegador que es, para asi generar el codigo del video para después reproducirlo en formato mp4 o swf, lo cierto es que es una solución genial y supervalida, tambien se van visionar los vídeos en telefonos moviles.

Aqui el ejemplo de muestra


Dentro del head

<script src="jquery.js"></script>
<script src="mediaelement.js"></script>
<script src="mediaelementplayer.js"></script>
<link href="mediaelementplayer.css" rel="Stylesheet" />


En el body


<span id="player1-mode"></span>


<video width="640" height="360" id="player2" poster="../media/echo-hereweare.jpg" controls="controls" preload="none">
<!-- MP4 source must come first for iOS -->
<source type="video/mp4" src="../media/echo-hereweare.mp4" />
<!-- WebM for Firefox 4 and Opera -->
<source type="video/webm" src="../media/echo-hereweare.webm" />
<!-- OGG for Firefox 3 -->
<source type="video/ogg" src="../media/echo-hereweare.ogv" />

<!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
<object width="640" height="360" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=../media/echo-hereweare.mp4" />
<!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
<img src="../media/echo-hereweare.jpg" width="640" height="360" alt="Here we are"
title="No video playback capabilities" />
</object>
</video>

<span id="player2-mode"></span>

<script>

$('audio,video').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});

</script>

<input type="button" id="stopall" value="Stop all">

<script>
$('#stopall').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>


Para descargar los archivos aqui