ASP.NET WebForm–Creando un User Control para video HTML5

Warning: array_merge(): Argument #2 is not an array in D:\home\site\wwwroot\wp-content\plugins\simple-social-share\simple-social-share.php on line 144

Hola, hace poco tuve la oportunidad de dar una charla en las oficinas de Microsoft Chile, junto a Pablo Berton, en donde estuvimos hablando de HTML5 sobre nuestros sitios web sin perder la compatibilidad, obviamente Modernizr salió en el juego. Entre las demos, me pareció muy interesante  la de crear Controles de usuario con retro compatibilidad, el ejemplo que vamos a revisar tiene que ver con crear un control para mostrar video, y dependiendo de las capacidades del navegador , vamos a presentar el formato correspondiente, esto último, no lo haremos con Modernizr, si no con la propia detección que provee el tag video.
Vamos a crear entonces, un proyecto de WebForm en la cual voy a agregar un nuevo user control al que llamaremos VideoUserControl.
En el código del control vamos a agregar las propiedades públicas para que podamos modificar  desde el código declarativo estas propiedades del html.

Public Class VideoUserControl

    Inherits System.Web.UI.UserControl

    <BrowsableAttribute(True)> Public Property Width As Integer

    <BrowsableAttribute(True)> Public Property Height As Integer

    <BrowsableAttribute(True)> Public Property Src As String

End Class

Si vemos el código declarativo, se nos aclara el panorama de lo que queremos hacer:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="VideoUserControl.ascx.vb" Inherits="WebFormDemoHTML5Video.VideoUserControl" %>

<video autoplay="autoplay"
       height="<%=Height %>"
       preload="auto" 
       width="<%=Width %>
">

    <source src="media/<%=Src %>.mp4" type="video/mp4" />

    <source src="media/<%=Src %>.webm" type="video/webm" />

    <source src="media/<%=Src %>.ogv" type="video/ogg" />

    <object data="media/<%=Src %>.swf" 
       height="<%=Height %>" type
="application/x-shockwave-flash"

       width="<%=Width %>">

          <param name="allowfullscreen" value="false">

          <param name="allowscriptaccess" value="always">

          <param name="flashvars" value="file=media/<%=Src %>.swf">

          <!–[if IE]>

             <param name="movie" value="media/<%=Src %>.swf">

          <![endif]–>

        <img alt="Advertisement" 
            height="<%=Height %>"
            src="media/<%=Src %>.jpg"
            width="<%=Width %>"
/>

    </object>

</video>

Podemos apreciar que las propiedades se ocupan justamente para dar formato y elegir la fuente del video, tenemos mp4,webm, ogv , luego en el caso que ninguno de estos formatos se soporten vamos por flash, y si flash no está instalado o está deshabilitado, agregamos una imagen.

Obviamente tenemos estos formatos en nuestra solución:

image_thumb1

Ahora vamos a utilizar y probar nuestro control.Vemos con con opera, esta reproduciendo el video webm( es difícil verlo en una foto, pero créeme)

image_thumb3

Ahora vamos a probar con IE9 con modo de explorador  internet explorer 7

image

Vemos que esta reproduciendo el Flash, y por último, si desactivamos el plugin de flash en nuestro explorador:

image_thumb7

Veremos lo siguiente:

image_thumb9

No hay mucha diferencia verdad, pero esta vez, es una imagen, entonces el objetivo se logra al mostrar la publicidad en distintos formatos, utilizando video html5 y los correspondientes fallback para ofrecen compatibilidad.

Espero que te sirva!
Saludos!
@chalalo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *