HTML5 Video Helper mit Silverlight und Flash Fallback

Dank HTML5 ist es recht einfach Video Elemente in Webseiten einzubinden. Man benötigt lediglich ein <video> Element und gibt die Quelle an. Möchte man mehrere Plattformen unterstützen so langt meist eine Video Quelle nicht aus oder man möchte einfach einen anderen Codec angeben. Demzufolge spezifiziert man mehrere Videoquellen mit unterschiedlichen Codes. Möchte man zudem noch Browser unterstützen die noch kein HTML5 verstehen, so möchte man das Video vielleicht über einen Silverlight Player oder Flash Player anzeigen.

Schnell wuchert das Tag und hier kann der WebMatrix HTML5 Video Helper unterstützen. Der folgende Aufruf

 @Html5Video.Create(mp4Url: https://test.de/video.mp4,

 oggUrl: "https://test.de/video.ogg")

erstellt

    1: <video id="video" width="400" height="250" preload controls poster="">
    2:   <source src="https://test.de/video.mp4" type="video/mp4"/>
    3:   <source src="https://test.de/video.ogg" type="video/ogg" codecs="theora, vorbis"/>
    4: </video>

das entsprechende HTML5 Video Element und dieses sieht im Internet Explorer 9 mit den Standard Controls folgendermaßen aus:

How-To Video

WebMatrix HTML5 Video Helper from Dariusz on Vimeo.

HTML5 Video Elemente mit Unterstützung für Silverlight und Flash Fallback

Source Code

    1: @functions {
    2:  
    3:     private static bool IsParam(string parameter)
    4:     {
    5:         if( !string.IsNullOrEmpty( parameter ) )
    6:         {
    7:             return true;
    8:         }
    9:         else
   10:         {
   11:             return false;
   12:         }
   13:     }
   14:  
   15: }
   16:  
   17: @helper CreateAlternateDownloadLinks(string prefix,
   18:     string wmvUrl = "",
   19:     string mp4Url = "",
   20:     string webmUrl = "",
   21:     string oggUrl = "")
   22: {
   23:     if( IsParam( wmvUrl ) )
   24:     {
   25:         @AlternateDownloadLink( wmvUrl, prefix + " wmv")
   26:     }
   27:     if( IsParam( mp4Url ) )
   28:     {
   29:         @AlternateDownloadLink( mp4Url, prefix + " mp4" )
   30:     }
   31:     if( IsParam( webmUrl ) )
   32:     {
   33:         @AlternateDownloadLink( webmUrl, prefix + " webm")
   34:     }
   35:     if( IsParam( oggUrl ) ) 
   36:     {
   37:         @AlternateDownloadLink( oggUrl, prefix + " ogg")
   38:     }                    
   39: }
   40:  
   41: @helper AlternateDownloadLink(string url, string text)
   42: {
   43:     <a href="@url">@text</a>
   44: }
   45:  
   46: @helper Create( string wmvUrl = "",
   47:                 string mp4Url = "",
   48:                 string webmUrl = "",
   49:                 string oggUrl = "",
   50:                 int width = 400,
   51:                 int height = 250,
   52:                 string poster = "",
   53:                 string silverlightPlayerXapUrl = "",
   54:                 string silverlightPlayerInitParams = "",
   55:                 string flashPlayerUrl = "",
   56:                 string flashPlayerVars = "",
   57:                 string alternateDownloadPrefixText = ""
   58: )
   59: {
   60:     <video id="video" width="@width" height="@height" preload controls poster="@poster">
   61:         @if( IsParam( wmvUrl ) )
   62:         {
   63:             <source src="@wmvUrl"/>
   64:         }
   65:         @if( IsParam( mp4Url ) )
   66:         {
   67:             <source src="@mp4Url" type="video/mp4"/>
   68:         }
   69:         @if( IsParam( webmUrl ) )
   70:         {
   71:             <source src="@webmUrl" type="video/webm" codecs="vp8, vorbis"/>
   72:         }
   73:         @if( IsParam( oggUrl ) )
   74:         {
   75:             <source src="@oggUrl" type="video/ogg" codecs="theora, vorbis"/>
   76:         }
   77:         @if( IsParam( silverlightPlayerXapUrl ) && IsParam( silverlightPlayerInitParams ) )
   78:         {
   79:             <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="@width" height="@height">
   80:                 <param name="source" value="@silverlightPlayerXapUrl" />
   81:                 <param name="initParams" value="@silverlightPlayerInitParams" />
   82:                 <param name="background" value="#00FFFFFF" />
   83:                 <a href="https://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
   84:                 <img src="https://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
   85:                 </a>
   86:             </object>
   87:         }
   88:         @if( IsParam( flashPlayerUrl ) && IsParam( flashPlayerVars ) )
   89:         {
   90:             <object width="@width" height="@height" type="application/x-shockware-flash" data="@flashPlayerUrl">
   91:                 <param name="movie" value="@flashPlayerUrl"/>
   92:                 <param name="allowfullscreen" value="true"/>
   93:                 <param name="flashvars" value="@flashPlayerVars"/>
   94:             </object>   
   95:         }        
   96:         @if( IsParam( alternateDownloadPrefixText ) )
   97:         {
   98:             <div id="alternate-download-links">
   99:                 @CreateAlternateDownloadLinks(alternateDownloadPrefixText, wmvUrl, mp4Url, webmUrl, oggUrl)                
  100:             </div>                
  101:         }
  102:     </video>
  103: }