Tag: video

Flash/JavaScript Video not working in SharePoint

Situation

We just ran into a funny issue with playing videos in SharePoint. We’re using tje JavaScript library flowplayer to play video files on our company intranet with the help of Flash, as I mentioned and demoed e.g. here and here. What we wanted to do next is to provide this functionality also on other servers (not just Asia Pacific, but globally). Besides flowplayer, we also looked at JW Player as an alternative, which uses a similar method of playing videos.

 

Issue

What now happened was that the videos were playing perfectly fine in our Asia Pacific intranet, but nowhere else. Interestingly, there were no JavaScript errors, and the library seemed to do what it should. There just wasn’t any video playing at all, we saw either a white or a black box, nothing else.

 

Solution

After lots of troubleshooting and testing we finally discovered the issue and the solution. The web application that hosts our Asia Pacific intranet had its Browser File Handling settings set to Permissive, while the other servers and web applications had it set to strict. After changing that, the video worked everywhere.
Note: This change affects not only the video files, but of course all files in your environment (PDF, Office, …). So before changing it, make sure that it doesn’t introduce any unwanted behaviour

Here are the steps to get there:
Open Central Admininistration -> Go to Manage web applications -> Select the corresponding web application and  select General Settings from the Ribbon -> select General Settings again -> Change Browser File Handling from Strict to Permissive

webappgeneralsettings

Adding video to your Office 365 public website

Sometimes you may want to add a video to your Office 365 public website. While you could for example upload your video to a service such as YouTube and use the provided HTML code to embed it with the Video Gadget, more than often you may prefer to host the video within your own site.

What you need to do so is your video in a suitable format (e.g. .mov, .flv, .wmv, .mpg, .avi, etc.) and Flowplayer, a free JavaScript library.

Download the latest version of Flowplayer, and unpack the contents of the ZIP file to your documents. Next, open your Office 365 public website, click on Member Login, and then on Documents, and upload the following files to it:
flowplayer.controls-3.2.5.swf, flowplayer-3.2.6.min.js, flowplayer-3.2.7.swf, and style.css (Note: depending on the latest version of flowplayer, the file names may be slightly different). Also, upload your video file to the library (I uploaded a file called flowplayer-700.flv), and you should have the following:
flowplayer1

The second step is to add the video to your page. Click on Web Pages, and click on the Page on which you want to show the video. Insert a HTML Gadget at the desired location, and paste the following code:

<SCRIPT type=text/javascript defer src=”/Documents/flowplayer-3.2.6.min.js”></SCRIPT>
<LINK rel=stylesheet type=text/css href=”/Documents/style.css”>
<A style=”WIDTH: 260px; DISPLAY: block; HEIGHT: 165px” id=player href=”/Documents/flowplayer-700.flv”></A>
<SCRIPT defer>
flowplayer(“player”, “/Documents/flowplayer-3.2.7.swf”);
</SCRIPT>

Note: update the WIDTH and HEIGHT values accordingly, and replace flowplayer-700.flv with your own video.

That’s it! You now have a video embedded in your page:
flowplayer3

Flowplayer offers a lot of flexibility when it comes to its controls and the design, have a look at the documentation for further details on how you can add a preview image to the video, don’t play it immediately by default (use flowplayer(“player”, “/Documents/flowplayer-3.2.7.swf”, {clip: {autoPlay: true}}); )    , and others.

Lastly, if you want to add multiple videos on a single page, do the following:
Add multiple A tags with different IDs (here, player1 and player2), and call them separately in the bottom JavaScript code:

<SCRIPT type=text/javascript defer src=”/Documents/flowplayer-3.2.6.min.js”></SCRIPT>
<LINK rel=stylesheet type=text/css href=”/Documents/style.css”>

<A style=”WIDTH: 260px; DISPLAY: block; HEIGHT: 165px” id=player1 href=”/Documents/flowplayer-700.flv”></A>
<A style=”WIDTH: 260px; DISPLAY: block; HEIGHT: 165px” id=player2 href=”/Documents/flowplayer-700.flv”></A>

<SCRIPT defer>
flowplayer(“player1”, “/Documents/flowplayer-3.2.7.swf”);
flowplayer(“player2”, “/Documents/flowplayer-3.2.7.swf”);
</SCRIPT>