Flash Fallback en HTML5

Cuando hablamos de fallback nos referimos a un plan B. En este caso, de que un navegador no soporte el reproductor HTML 5 se pueda emplear un reproductor Flash.

Hay otras formas de actuar en caso de que un navegador no pueda reproducir un contenido. Una de las formas a evitar es el mítico mensaje de: “Tu navegador no soporta el contenido, por favor actualícelo”. Y sí, es cierto que es importante tener un navegador actualizado, pero a muchos usuarios no les gusta este tipo de mensajes.

Una de las formas recomendadas es que el vídeo o audio funcione en otro medio como YouTube, Vimeo, soundcloud…

Y otra posibilidad, y la cuál trataré en este post, es usar un Flash Video Player o el Audio Player. Hay muchos reproductores de Flash y gratis. Para este tutorial enseñaré hacer un flash fallback con flowplayer con la versión 5. Para el ejemplo descargué el vídeo Time Lapse de Caracas (NOCHE) de luismi160496 desde aquí.

Dentro del <head>

   <!-- CSS del reproductor -->
   <link rel="stylesheet" href="//releases.flowplayer.org/5.5.2/skin/minimalist.css">
    
   <!-- Librería jquery, fundamental para que el reproductor funcione -->
   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   
   <!-- Librería Flowplayer -->
   <script src="//releases.flowplayer.org/5.5.2/flowplayer.min.js"></script>

	<!-- Este fragmento de código imprimira en el p si se está usando HTML5 o flash-->
	<script type="text/javascript">
    flowplayer(function (api) {
      api.bind("load", function (e, api) {
        $(".info").text(api.engine + " engine in use");
      });
    });
    </script>

flowplayer(function (api) {

api.bind("load", function (e, api) {

$(".info").text(api.engine + " engine in use");

});

</script>

<body>

<h1>Prueba de reproductor</h1>
<div data-ratio="0.4167" class="flowplayer is-splash" width="700" height="400">
   <video>
      <source type="video/mp4" src="caracas-timelapse.mp4">
   </video>
</div>
 
<p class="info">&nbsp;</p>

<h1>Prueba de reproductor</h1>

<video>

</video>

</div>

ejemplo-reproductor-flash-fallback

Resultado de flowplayer

Según el navegador si es viejo pondrá que usa flash en caso contrario html5. Esta manera alterna de manera automática html5 a flash según lo precise.

Es posible que otros reproductores usen otra forma de realizar fallback como la que muestro a continuación.

<video controls width="700" height="400"> 
  <source src="caracas-timelapse.mp4" type="video/mp4"> 
 
  <object id="flowplayer" width="700" height="400" 
   data=".swf del reproductor"  
   type="application/x-shockwave-flash"> 
    <param name="movie" value="caracas-timelapse.mp4"> 
  </object> 
</video>

data=".swf del reproductor"

type="application/x-shockwave-flash">

</object>

</video>

También se puede añadir un imagen que se mostrará antes de reproducir el vídeo y un mensaje de aviso con un enlace de descarga.

<video controls width="700" height="400"> 
  <source src="caracas-timelapse.mp4" type="video/mp4"> 
 
    <object id="flowplayer" width="700" height="400" 
    data="swf del reproductor"  
    type="application/x-shockwave-flash"> 
    <param name="movie" value="caracas-timelapse.mp4"> 
    </object>
    
    <img src="thumbnail.jpg" alt="Caracas timelapse"> 
    
    <p>Tu navegador no sooporta video HTML5 o Flash.</p> 
    <p>Puedes descargar el vídeo en el siguiente enlace <a href="caracas-timelapse.mp4">MP4</a> 
</video>

data="swf del reproductor"

type="application/x-shockwave-flash">

</object>

<p>Tu navegador no sooporta video HTML5 o Flash.</p>

<p>Puedes descargar el vídeo en el siguiente enlace <a href="caracas-timelapse.mp4">MP4</a>

</video>

Y en principio eso es todo. Espero que esto os sirva de ayuda. A seguir picando. Saludos 🙂