HTML5 and Video in Sitecore

Not long ago, a client came to us and asked what sort of support Sitecore had for videos and HTML5.  Now let me preface this by saying that I am NOT a front end developer.  Given the choice, I’d rather pull my toenails out with pliers over writing javascript and doing front end development.  So when a client asked about the support Sitecore had for HTML5, I didn’t have a clue what they were referring to.  That being said, I set out to learn all I could about video and HTML 5.  First impression is that I like it.  In looking over the basics and how it works via the W3 schools HTML5 tutorial, it feels like this is how html should work!.  Now.. that being said, how can/does this fit in with Sitecore?

What is HTML5?

Before we get into that.. lets first define exactly what makes HTML 5 unique when it comes to video.   The first thing to note is that this is NOT like a YouTube embedded video.  It will look like a YouTube style video possibly, however, the major difference here is that you are linking to the direct videos.. not linking to a 3rd party hosted video.  The second thing to note is that because HTML is so new, not all browsers support all video codecs.  So you’re going to have to make some decisions about the videos you’re linking to.  The third thing is that the codecs that are supported by HTML are VERY specific.     Now.. that being said.. what codecs are supported?

• MP4–  MPEG 4 files with H264 video codec and  AAC audio codec
  •  Support:  
• WebM –  WebM files with VP8 video codec and Vorbis audio codec
  • Support:  
• Ogg= Ogg files with Theora video codec and Vorbis audio codec
  • Support:  

So now that we know what formats are supported and by what browsers, the next step for you will probably be to convert the your video. As you can see.. there is no advantage to adding the webm format, so I didn’t include it in my code samples.  I did a search out on the internet and the general consensus seems to be that for a free converter, your best bet would be to go with the Miro Video Converter.  It’s free, easy to use, just pay attention to the fact that not all conversions can be done from all formats.  For instance, mp4 to webm does not work.. but doesn’t warn you.  Once you have your new files.. we’re ready to go! Here’s the basic syntax for the tag:

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

Integrating this with Sitecore

Looking at the Sitecore modules out there, there isn’t one specifically for this, so I’ve taken it up to write a module to do this and update this when I’m done.  However, until I iron out all the details, here’s how you can do this manually.  The first thing I did was create a new Sitecore template.  I added a File field for each of the file types supported.  Secondly, there are several attributes that you can add to the <video> tag and I added a field for each of these.  Here’s how my Sitecore template is set up.  These are not necessary, but allow for the most freedom in choosing how your video player will display.

Bind to Sitecore Presentation Layer

How we bind to presentation is accomplished any number of ways, but for the sake of showing how it works, I’m going to stick to the easiest and most basic way of doing this. So, we want to bind the new template item with a Sitecore rendering or sublayout. You can do this dynamically by setting the “DataSource” on a sublayout when you select it in the Presentation dialog for your item. You can find more here on how to get the Datasource for a sublayout here. From there, it’s just a matter of binding the fields to your tags. In my example, I created a literal for each of the source tags as well as one for all the attributes that you can use on the

if (this.DataSource != null && !this.DataSource.Empty)
 {
   int h, w;
   StringBuilder sb = new StringBuilder();
   if(Int32.TryParse(DataSource["Height"], out h))
     sb.Append(" height=" + h);
   if (Int32.TryParse(DataSource["Width"], out w))
     sb.Append(" width=" + w);
   if (Helper.GetCheckbox("Controls",DataSource))
     sb.Append(" controls='controls'");
   if (Helper.GetCheckbox("Muting", DataSource))
     sb.Append(" muting='muting'");
   if (MediaManager.HasMediaContent(Helper.GetFileMediaItem(DataSource, "Thumbnail")))
     sb.Append(" poster='" + Helper.GetImageMediaUrl(DataSource, "Thumbnail") + "'");

   attributes.Text = sb.ToString();

    mp4Source.Text = (MediaManager.HasMediaContent(Helper.GetFileMediaItem(DataSource,"mp4Source"))) ?
       "<source src="&quot; + Helper.GetMediaFileLink(<span class=" span="" class="hiddenSpellError" pre="class " />hiddenspellerror="" pre="" />DataSource, "mp4Source") + "" type="video/mp4" />;" : string.Empty;
    oggSource.Text = (MediaManager.HasMediaContent(Helper.GetFileMediaItem(DataSource, "oggSource"))) ?
       "<source src="&quot; + Helper.GetMediaFileLink(DataSource, &quot;oggSource&quot;) + &quot;" type="video/ogg" />;" : string.Empty;
 }
 else
   this.videoPlayer.Visible = false;

Now.. the beautiful part is that Sitecore will actually handle these for your just fine as media library items. You can simply upload your files to Sitecore’s media library and Sitecore will handle the .ashx links (p.s. The “Helper” class is just a personal Sitecore specific helper class to handle common tasks). The last part that is essential to making this work is that you’re going to need to tell Sitecore how to handle these new file types. You can add this to your mimetypes.config file:

  <mediaType extensions="mp4">video/mp4
  <mediaType extensions="ogg,ogv">video/ogg

I’ve tested this and it works great in all the browsers I tried (although you’ll have to use IE9 mode to make it work in IE9). Look for my module here soon. Also, there are quite a few video players out there. I have chosen not to cover those because I found that they vary a lot and the point was to show how Sitecore and HTML 5 video can be integrated. The players offer a lot of flexibility, but at a cost either financially or in a large learning curve. I’ll leave it to you to explore those options if you desire.. but for some simple inline videos.. I find that these work just fine. 🙂

Happy Sitecoring!