Second Life of a Hungarian SharePoint Geek

July 23, 2013

Creating a Flash Video Player For SharePoint using the built-in web parts – Version 1

Filed under: CEWP, jQuery, REST, SP 2010 — Tags: , , , — Peter Holpar @ 20:51

Recently I had to provide our users a way to display a list of Flash video files (FLV) with the ability to play the selected one. I found a similar solution on CodePlex, however, I did not like the idea to install a custom web part just to fulfill this requirement, and implemented instead my custom lightweight solutions using the standard SharePoint web parts. In this post I show you the implementation based on the Content Editor Web Part (CEWP), in a later post I publish another version based on the Content Query Web Part (CQWP).

It’s common in the implementations that they utilize Flowplayer version 3.2.16. I created a folder called flowplayer on the SharePoint server at 14\TEMPLATE\LAYOUTS, and from the flowplayer folder in flowplayer-3.2.16.zip copied the following files into the new folder:

flowplayer.controls-3.2.15.swf
flowplayer-3.2.12.min.js
flowplayer-3.2.16.swf
style.css
(from the example subfolder)

The Flash video files are stored in this case in a document library called “VideoLib1”. I set the Title property of the files to provide a short description of the content beyond the file name (Name property).

image

Additionally, I needed jQuery version 1.8.3, json2.js (to support JSON.parse in the Quirks document mode of Internet Explorer, like the WSS 3.0 compatible master page of SharePoint 2010) and the LINQ for JavaScript (ver.3.0.3-Beta4) library (version is important due to the incompatible syntax of former versions). All of these JavaScript libraries were located – for the sake of simplicity – in the jQuery folder in Layouts.

I’ve created a new web part page, added a new CEWP to the page, and set the source code of the web part according to the sample below:

Code Snippet
  1. <script src="/_layouts/Flowplayer/flowplayer-3.2.12.min.js"></script>
  2. <script src="/_layouts/jQuery/jquery-1.8.3.min.js"></script>
  3. <script src="/_layouts/jQuery/json2.js"></script>
  4. <script src="/_layouts/jQuery/linq.js"></script>
  5. <script src="/_layouts/jQuery/linq.jquery.js"></script>
  6.  
  7. <link rel="stylesheet" type="text/css" href="/_layouts/Flowplayer/style.css">
  8. <span><a style="display:block;width:520px;height:330px" class="myPlayer"></a></span>
  9. <div class="videoList" style="text-align:left;"></div>
  10.  
  11. <script language="ecmascript">
  12.  
  13.     function startClip(src, title) {
  14.         flowplayer().play([
  15.     { url: src, title: title }
  16. ]);
  17.     }
  18.  
  19.     $(document).ready(startScript);
  20.  
  21.  
  22.     function startScript() {
  23.         // initialize FlowPlayer in the 'myPlayer' anchor (A) HTML tag
  24.         flowplayer("a.myPlayer", "/_layouts/Flowplayer/flowplayer-3.2.16.swf");
  25.  
  26.         // ctx assumes a ListViewWebPart (it might be even hidden) on the same page
  27.         var siteUrl = ctx.HttpRoot;
  28.  
  29.         // clear the video list DIV (videoList)
  30.         $('.videoList').empty();
  31.  
  32.         $.ajax({
  33.             type: 'GET',
  34.             contentType: 'application/json;odata=verbose',
  35.             // get the (file)Name and Title property of each .FLV file
  36.             url: siteUrl + "/_vti_bin/listdata.svc/VideoLib1?$filter=endswith(Name,'.flv')&$select=Name,Title",
  37.             headers: {
  38.                 "Accept": "application/json; odata=verbose"
  39.             },
  40.             dataType: "json",
  41.             complete: function (result) {
  42.                 var response = JSON.parse(result.responseText);
  43.                 if (response.error) {
  44.                     alert("Error: " + response.error.code + "\n" + response.error.message.value);
  45.                 }
  46.                 else {
  47.                     var videos = response.d.results;
  48.                     Enumerable.from(videos).forEach(function (x) {
  49.                         // on click event will be the video clip started
  50.                         var link = '<p><a href="javascript:void(0)" title ="' + x.Name.substring(0, x.Name.length – 4) + '" onclick="startClip(\'' + x.__metadata.media_src + '\', \'' + x.Title + '\')">' + x.Title + '</a></p>';
  51.                         // append video link to the video list DIV (videoList)
  52.                         $('.videoList').append(link);
  53.                     });
  54.                 }
  55.             },
  56.             error: function (xmlHttpRequest, textStatus, errorThrown) {
  57.                 alert(errorThrown);
  58.             }
  59.         });
  60.     }
  61. </script>

 

In this script we request the Name and Title properties of the .flv files from our document libraries through the REST API, and add the required links to the play list. Alternatively one could use the Client OM as well, but in this case I found REST to be simpler.

To be able to send the REST request, we need the URL of the current SharePoint web. The JavaScript variable ctx referred to in my script is available only we have at least one ListViewWebPart on the same page. If you don’t have any, you can add a dummy  one (for example, the movie document library itself), and set it to be hidden, as illustrated below:

image

If you don’t like this hack, you can get the URL through the Client OM as well, through an extra asynchronous call.

The image below illustrates the end result rendered by the CEWP:

image

Clicking on the title of the movie will start the video playback.

You can read about a similar solution utilizing CQWP here.

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

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

Blog at WordPress.com.

%d bloggers like this: