Playing Video in Restricted SharePoint Environments

Few months back I came across a scenario where User wanted to play Video in SharePoint Pages. But the Environment restricts usage of Video Streaming.

Solution

In this case we can use HTML5 Video Tags.

HTML5 Video

HTML5 included the Video & Audio tags which allows playing multimedia without any extra plugin requirement.

Previous to HTML5, Flash Or Media Player was required to play video Or audio files. Now all HTML5 compatible browsers support the Video tag by incorporating necessary multimedia infrastructure within them.

Following are the Browsers & Versions supporting HTML5 Video & Audio tags.

image

Reference: http://www.w3schools.com/html/html5_video.asp

SharePoint & Video Tag

Coming back to our problem, Perform the following activities for testing the Video tag.

Open SharePoint Designer. Go to Site Pages.

image

Choose the new HTML or ASPX option. Edit the file. Add the following code inside body tag.

<video width=”300″ height=”250″ controls>
<source src=”/siteassets/video.mp4″ type=”video/mp4″>
  Your browser does not support the video tag.
</video>

The code performs the following:

· Set the Video tag with wdith & height

· Specify the source as mp4 file

· Set the Error text if browser does not support video tag

Your code in HTML file looks like below.

image

Video File

Now we need to create a video file. You can download the Video file from link below.

http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5

image

Choose the MP4 file, download, rename & upload to Site Assets library.

image

Testing

Now open the HTML file in a Video supported browser. You will get the video played as shown below.

image

Now open the HTML file in a non-supported browser. You will see the following error message.

image

image

You can also set a Preview Image for the Video tag. This image will be displayed in the non-play state.

Restricted Scenarios

The video restricted scenarios can be:

1. SharePoint Restricted Content Types

2. SharePoint Restricted File Extensions

3. IIS Video Streaming Restrictions

References

http://www.w3schools.com/html/html5_video.asp

Summary

In this article we have explored using Video Tag for a restricted SharePoint environment scenario.

Leave a Reply

Your email address will not be published. Required fields are marked *