Serving HTML5 Video from SharePoint Document Libraries

So you want to serve up some video content and use the <video> tag? Cool!

You want to do it using video files you have in SharePoint? Cool, that shouldn’t be too hard.

Unfortunately out of the box SharePoint 2010 is going to serve that video file out of the document library with a MIME Type of application/octet-stream, which IE and Firefox are not going to recognise as playable video. Chrome seems to be inspecting the file and determining the file type itself so video plays in that browser without needing a correct MIME Type sent from the web server.

I’m not going to get deeply into the ins and outs of the codec nightmare (ugh). Expect to say, there are some good free tools for encoding your video as H.264. I like x264 for a command line tool or H.264 Encoderif you want a GUI. I’m not discussing WebM as I didn’t need to create videos using that encoding for the piece of work that generated this blog post.

If you’re after a hand on the front of generating your HTML, check out Video for Everybody. One of my big complaints is that there is nothing laid down in the spec to require a “full window” mode control, the individual browsers may provide this control, but at this stage IE, Firefox and Chrome don’t . If you’re looking to provide something on this front, then I’d suggest using VideoJS

So assuming that you have that all sorted there are a couple of steps to make SharePoint serve the content in a manner that a browser can use, so don’t just stand there, let’s get to it.

Step 1 – Configure IIS 7 to provide a MIME type for .mp4 files.

Yes, I’m only covering the .mp4/H.264 case, just repeat Step 1 tweaking for WebM/Ogv

1. From the Start menu, enter inetmgr in the search box and press Enter. An instance of the IIS Management Console will start.

2. Select the server node, in the Features View locate the MIME Types feature in the IIS Group and double click on it.

MIME Type in IIS7

3. In the Actions pane click Add…

4. Fill in the form providing .mp4 as the File name extension and video/mp4as the MIME Type and click OK

Add MIME Type

5. Close the IIS Management Console.

Step 2 – Configure the SharePoint Web Application to serve mp4 using the configured MIME Type.

1. From the Start Menu, select All Programs | Microsoft SharePoint 2010 Products | SharePoint 2010 Central Administration. Under Application Management select Manage web applications.

2. Select the desired web application in the list.

3. Click on General Settingsin the ribbon.

4. Scroll down and find the Browser File Handling section, change the selection to Permissive, scroll to the bottom of the dialog and click OK.

Browser File Handling

5. Close the browser window.

6. You now need to reset IIS. Open and command prompt and enter run the iisresetcommand.

BOOM!

You’re now serving video files in a manner that all the major browsers should be able to play them when used as a <source> element in the <video> tag!

Advertisements
This entry was posted in Configuration, Development, HTML5, SharePoint. Bookmark the permalink.

9 Responses to Serving HTML5 Video from SharePoint Document Libraries

  1. roberoo says:

    Hey Gavin, thanks for this. I’m having real issues in getting mp4’s to stream to an iPhone from SharePoint. The MIME types are all OK since mp4’s are working in a Safari browser on a Mac. But for some reason they don’t work on an iPhone. Any ideas?

    • gavinbarron says:

      What version iPhone? iOS 3 has a nasty bug where by using the Poster attribute of the tag breaks the video element.
      Could be an encoding issue too, there are problems with using HD H.264 encodings on older models.
      Check out the Video For Everybody test page for a good breakdown of codec implementation and usages. http://camendesign.com/code/video_for_everybody/test.html

      The final thing I’ve found is that you MUST have anonymous access to the library from which the file is being served enabled, even if the user is authenticated for WP7 devices, this may hold for iPhone but I’ve not tested it.

  2. Janson says:

    Here you go guys….

    http://blog.sallarp.com/why-your-video-refuse-to-play-on-ipad-iphone/

    I’ve used this http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Internet-Information-Services-IIS7-Version2 but serving up video from Non Sharepoint IIS as setting to 32bit breaks Sharepoint 2010 – not surprisingly. If a X64 version of the mod-h264 is released it should be good to go.

    Hope that helps

  3. ankul says:

    Thank you bro 🙂

  4. Vincent says:

    It did not resolve the problem.
    Could there be other possible causes?

  5. Pingback: Add video in Sharepoint 2007 document library – BrilliantBox Solutions

  6. Pingback: Ajouter un vidéo dans une librairie de document avec Sharepoint 2007 – Solutions BrilliantBox

  7. mikelaughs says:

    check out my blog on this topic here https://blogs.technet.microsoft.com/sharepoint_me_in_the_right_direction/2015/01/21/playing-windows-authenticated-sharepoint-2013-videos-from-a-mac-os-x-device-and-safari-browser-solution/
    The main gist: There are several working scenarios for Safari on Mac, which may equally apply to IOS – iPhone. 1. ADFS claims auth (including office 365 which uses this) used in SharePoint with blobcache enabled, 2. Anonymous access is allowed on IIS 7.5+ (non-sharepoint iis site with HTML5 video tag), 3. Asset library in SharePoint has anonymous enabled and blobcache is enabled.
    The key thing to note is that the Safari browser on IOS wants to use something called byte-range, and is very strict in that it requires the server to respond immediately, indicating that it does indeed support byte-range requests. a 401 challenge response for authentication does not include an acknowledgement of supporting byte-range requests, so the Safari browser just tells the server nevermind (Connection:Close).
    Read the blog for more details.

Leave a 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s