+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Playing Videos in Sitefinity with HTML 5 instead of Silverlight

by Slavo Ingilizov

In the current version of Sitefinity (4.4), any videos uploaded in the backend are by default only in WMV format. This limitation is there, because we use the MediaPlayer control from the RadControls for Silverlight suite to play those videos on Sitefinity pages, and Silverlight supports only this format. We’ve had requests from customers to also support other video formats and use alternative players when playing those videos in the frontend. Although we plan to include this functionality in the product itself, this blog post is going to show how you can achieve this right now.

Before moving to the details, you can take a look at how the whole scenario can be setup in the following video. You can follow the steps in the video by downloading the source code for the example.

Configuring the accepted video formats

First we need to tell the Videos module that it should accept files other than WMV. For the purposes of the demo we will use MP4 video format. To change the accepted file format, you can go to Administration –> Settings –> Advanced –> Libraries –> Videos. In the Allowed File Extensions box, just type the formats in a comma separated list. I’ve included .mp4 as an allowed extension.

fileFormatSetting

Once we’ve saved those changes, we can upload MP4 files to the Videos module. Although we won’t see thumbnails, the files will be successfully uploaded.

Creating a Widget to Play Videos with HTML5

Although there are many ways to play videos in web applications, recently HTML 5 has attracted a lot of attention. The new specification includes a <video> tag, which is directly supported by HTML5 compatible browsers and does not rely on browser plugins for video playback. More information about HTML5 video can be found at http://html5video.org/.

Including a bare <video> tag in your web page would play the video, but lacks any other goodies usually supported by existing video players. Fortunately, there are a number of HTML5 video players, which build upon the HTML5 video tag and provide different skins, easy setup, Flash fallback, playlists and other video player features. To make things easy, we are going to use VideoJS, one such free HTML5 video player.

Note that VideoJS is licenced as GPLv3. We are just providing a sample of how it can be used. Please make sure that you do not violate the license in your projects.

We are going to implement a simple user control, which outputs a video tag in your web page, and hooks up the VideoJS player.

Implementing the widget template

The only markup we need in the widget template is the mentioned <video> tag. We also need to provide placeholders for the URL of the video itself, and set some default VideoJS classes. The final template looks like this:

Implementing the widget code

Our widget has two main tasks to perform:

  • Include the VideoJS scripts and styles on the page
  • Dynamically set the URL of the video to be played

We’ve already included a placeholder for the VideoUrl property in the template. ASP.NET will automatically bind that placeholder to the value of the VideoUrl property of our widget. So the only thing left to do is to actually retrieve the URL and set the VideoUrl property. It’s easy to do this using the Sitefinity fluent API. Here’s the whole implementation.

Implementing the widget designer

Once a user drops the HTML5 Video widget on a page, he needs a way to select which video will be played. Setting the VideoId manually will work, but is not very user friendly. Instead we can create a widget designer, which will let us choose from a list of videos that have already been uploaded. For more information on widget designers, please see the Sitefinity documentation.

In the video widget designer, we are going to use an existing ContentSelector control to show a list of videos.

We don’t need any special server code in the designer, except hooking up the client component, which will select the video.

As with all widget designers, there are two methods we need to implement

  • refreshUI() – called each time when our designer is loaded. We use it to highlight the currently selected video when the designer is opened.
  • applyChanges() – called each time users save settings. We use it to set the VideoId property based on the currently selected video.

This is it. We are done with the implementation. Now we only need to register the widget in Sitefinity’s Toolbox and use it on our pages.

Installation Instructions

  1. Download the source code of the example from here.
  2. Extract the archive in the root web folder of your project.
  3. Open the project in Visual Studio and include the extracted files in the solution. After this the solution should look like this:
    solutionExplorer
  4. Right-click on the Html5VideoControlDesigner.js file and set the Build action to EmbeddedResource.
  5. Add the following line to the bottom of your AssemblyInfo.cs file:
    [assembly:WebResource("SitefinityWebApp.Html5Video.Html5VideoControlDesigner.js", "application/x-javascript")]
  6. Build and run the project.
  7. Register the Html 5 video widget in the toolbox with the following path: ~/Html5Video/Html5VideoControl.ascx.
  8. Drop the widget on a page and enjoy.

14 comments

Leave a comment
  1. Jens May 16, 2012
    I is wrong that silverlight only support wmv.
    The Control supports MP4 also.
    Which Video Tag do you think a Provider should embedd for HT ML5 support :)

    It´s a hard question .
  2. cschneider27 May 16, 2012
    is it just me or is there no sound to the video? I have tried it in a few different browsers and a few different computers.
  3. Slavo May 16, 2012
    @cschneider27 - The video was recorded with no sound. It just follows the steps of setting up the sample widget.
  4. Jens May 16, 2012
    GPLv3 as license.
    An no go for a serious Business Web site.
  5. Doug May 16, 2012
    Will this solution also work in Version 4.3? I have a clients CEO who is interested in getting a video posted that can be viewed on iPad and iPhone.
  6. Duarate May 16, 2012
    We´ve got the video working with Chrome but with firefox is not working because we are explicit defining the type has .mp4 and .mp4 doesn´t work in firefox. Same thing in IE.
    How cam we make this control to work in cross-browsing
  7. Nidhi Apr 02, 2013
    Hello,

    I am not able to see video in firefox and iphone too.

    In android we are not able to play it.

    Please help me as site is live site.
  8. Mark Apr 14, 2013
    Looks good. I tried this is with SF 5.4 and it "almost" works.

    Has anyone else got this working in SF version 5.x?

    What other options are there?

    Thanks
  9. Bishoy Hanna Sep 11, 2013
    I think you also need to add MP4 mime type through 
    Administration –> Settings –> Advanced –> Libraries –> MimeMappings
    video/mp4
  10. asdfsadf Apr 22, 2016
    asdfasdf
  11. com Apr 22, 2016
    orlkjdsaf aslkf asf
  12. Madsen May 17, 2016
    It is sharing many articles on this played video in sitefinity. These articles we are finding to have many blogs and assignment writer articles. Every article we are needed to find different blogs and different websites.
  13. oieod Jul 12, 2016
    I have read so many blogs about these online essay writing topics. That info very helpful to our college students and essay writing service fast economics developers. Thanks for all your topics provided to our blog content followers.
  14. Philip Smith Sep 12, 2016
    IPTV could be a broadcasting technique that produces use of web lines to deliver video feeds. It doesn't have faith in a browser so as to perform. Instead, an iptv supplier connects a decoder box to your tv for you to be ready to read videos. The videos square measure given to you online and in period of time. The sole vital demand for you to fancy IPTV service could be a high-speed web affiliation.

    Leave a comment