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!

8 thoughts on “HTML5 and Video in Sitecore

    1. Hi Steve. You’re very welcome. The Helper.GetFileMediaItem() method is a method I called from my own helper class. After using Sitecore for a period of time, you’ll find that it’s easier to put common tasks in your own library. If you don’t have one already, I highly suggest that you start building one or check with your organization to see if there is one already in place. The method I referenced above simply returns back the media item given an item and the name of the field. It checks if it’s a file field and and if so, it passes back the media item referenced in the field. It looks like this:

      public static Item GetFileMediaItem(Item item, string fieldName)
              {
                  FileField file = item.Fields[fieldName];
                  if (file != null && file.MediaItem != null)
                      return file.MediaItem;
                  return null;
              }
      

      Like

  1. SEO Positive Plus are a newly established SEO Company based in North Wales.
    We pride ourselves on providing amazing service at affordable prices, all work is done by hand, so you don’t
    need to worry about being scammed by companies that use automation software.

    Like

  2. Hey! This is my 1st comment here so I just wanted to give a quick shout out and say I truly enjoy reading through your blog posts.
    Can you suggest any other blogs/websites/forums that cover
    the same topics? Thanks for your time!

    Like

  3. It’s a pity you don’t have a donate button! I’d without a doubt donate
    to this superb blog! I guess for now i’ll settle for bookmarking and adding your RSS feed
    to my Google account. I look forward to brand new updates and
    will share this blog with my Facebook group. Talk soon!

    Like

  4. Miracle and love spells are psychic energy made inside the
    thoughts of the witch and magnified by character utilizing such elements as herbal therapies, gems
    and deposits, candle lights, incense, seashells and many other Potent supplies.
    Then when the Trumpet is blown, there will be no more relationships between them that Day, nor will
    one ask after another. Lucy and Raj are, for the most part, enjoying
    their meal.

    Like

Leave a Reply to Steve Ottenad Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s