Filme (Media Player, Flash, YouTube) in SharePoint

Hinweis: Dieser Post wurde ursprünglich unter http://www.sharepointblogs.com/michael publiziert.

While the standard SharePoint RichText/HTML field doesn't allow the editor to add any custom code that shows objects such as for playing movies embedded in the content, there are many different approaches documented on the web how to achieve it by creating own webparts, using the Content Editor WebPart, adjusting the RichText-Editor, third party controls etc. I will add another approach that might be worth considering for some of you.

The scenario was the following: Content editors should be allowed to add movies of any given media type in a "standard way" in the standard SharePoint RichText/HTML editor. Every page will have a picture (for movies this is the preview-picture where the user/reader can click and will then see the movie) and a title, followed by the (text-)content. The editor should (by using the standard means) be able to set the URL of the preview image and the url of the movie, no matter which media type it is.

In order to allow this, I have prepared a "Reusable Content" HTML-Element called "Movie Block" that looks like this:

<DIV style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; WIDTH: 100%; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid" class=sc_movie>
<DIV style="WIDTH: 150px; FLOAT: left"><A class=sc_movieDisplayLink title="" jQuery1246712582404="2"><IMG style="BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid" border=0 alt="Click here to start the movie."></A></DIV>
<DIV style="WIDTH: auto; DISPLAY: block; FLOAT: left">Enter description here</DIV>
<DIV style="CLEAR: both" class=sc_moviePlayer></DIV></DIV>

 

Now an editor can open a new publishing page with a RichText/HTML-Field and add the Reusable Content into it:

After adding the text-content, he should first set the preview image (i assume that it is in the Site Collection Images in my example). He simply clicks on the image and then on the "Image"-Button in the toolbar to choose the image:



The result will look like this:



Now he must point to the movie. This is achieved by simply clicking again on the image and then press the "Open a new window to edit Hyperlink"-Button:



Hint: have a look at this page to see how the URLs must be built to make the movies auto.start.
After publishing the page, it will look like this:



Clicking on the image will do the following:



By clicking on the "Close"-Link, the dynamic MovieViewer disappears. Now how is this done? We are using a little bit of JQuery here. The JQuery Library is included in the MasterPage like this:

<SharePoint:ScriptLink language="javascript" name="jquery-1.3.2.js" Defer="true" localizable="false" runat="server"/>

As you can see, I've deployed it directly in the "Layouts" folder in the 12-hive. For the JQuery script that actually executes our functionality, I've created another .js file which i've added as well to the MasterPage:

<SharePoint:ScriptLink language="javascript" name="sc_movies.js" Defer="true" localizable="false" runat="server"/>

Now the content of this file looks like that:

/*
This javascript file contains different methods for playing a movie
*/

// This Hashtable is used to store references to the link that has opened the movie player (see
var moviesPlaying = {};

// Attach to the click event of all links that should open the movie player
$(document).ready(function() {
    $(".sc_movieDisplayLink").click(function() {

        var $movieLinkTarget = $(this).attr("href");

        // Parse the Link Target
        var $moviePlayerHtml = "";
        var $isMovie = false;
        if ($movieLinkTarget.match(".swf$") == ".swf") {
            $moviePlayerHtml = "<object ID=portraitflash WIDTH=450><param NAME=movie VALUE="" + $movieLinkTarget + ""> <param NAME=quality VALUE=high> <embed src="" + $movieLinkTarget + "" quality=high WIDTH=100% TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed></object>";
            $isMovie = true;
        } else if ($movieLinkTarget.match(".wmv$") == ".wmv" || $movieLinkTarget.match(".mpg$") == ".mpg" || $movieLinkTarget.match(".mpeg$") == ".mpeg") {
            $moviePlayerHtml = "<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaPlayer" ShowStatusBar="true" EnableContextMenu="false" autostart="false" width="450" loop="false" src="" + $movieLinkTarget + "" />"
            $isMovie = true;
        } else if ($movieLinkTarget.indexOf('youtube.com') != -1) {
            $moviePlayerHtml = "<object type="application/x-shockwave-flash" width="450" height="300" data="" + $movieLinkTarget + ""><param name="movie" value="" + $movieLinkTarget + "" /><param name="wmode" value="transparent" /></object>";
            $isMovie = true;
        }

        if ($isMovie) {
            // Get the movie player container
            var $moviePlayer = $(this).parents(".sc_movie").children(".sc_moviePlayer");
            if ($moviePlayer != null) {

                // Make a copy of the original href
                $(this).attr("href_orig", $movieLinkTarget);
                // Remove the original target empty so the link won't cause a redirect
                $(this).attr("href", "BLOCKED SCRIPT;");

                // Create a new GUID to identify the link that caused the movie playing later
                var $guid = createGuid();
                moviesPlaying[$guid] = $(this);

                // Fill the movie player on-the-fly
                $moviePlayer.html("<div><a href="BLOCKED SCRIPThideMoviePlayer('" + $guid + "');">Close</a></div>" + $moviePlayerHtml);
                // Display the movie player
                $moviePlayer.css("display", "block");

                var $moviePreviewImage = $(this).parents(".sc_movie").children(".sc_movieDisplay");
                if ($moviePreviewImage != null) {
                    // Hide the preview image
                    $moviePreviewImage.css("display", "none");
                }
            }
        }
    });
});

// Hides the movie player
function hideMoviePlayer(id) {
    // Set back the link to its original state
    moviesPlaying[id].attr("href", moviesPlaying[id].attr("href_orig"));
    // Hide the movie player
    moviesPlaying[id].parents(".sc_movie").children(".sc_moviePlayer").css("display", "none");
    moviesPlaying[id].parents(".sc_movie").children(".sc_moviePlayer").html('');
    // Show the preview image
    moviesPlaying[id].parents(".sc_movie").children(".sc_movieDisplay").css("display", "block");
    // Delete this object from the Hashtable
    delete (moviesPlaying[id]);
}

// Returns a new GUID
function createGuid() {
    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}

// Helper function to create a GUID
function S4() {
    return (((1 + Math.random()) * 0×10000) | 0).toString(16).substring(1);
}

As you can see, the script is pretty much straight forward and uses JQuery to find the necessary elements in the RichText. It is able to show the following types of movies:

• SWF
• WMF
• YouTube Movies

But by adding more extensions you can add any format you want.

Hope you like this approach how to embed movies in SharePoint pages in a "editor-suitable" way. No SharePoint components are tangled, only a small JavaScript does it all .

Kommentar hinterlassen Name: Email: Ihre URL: Kommentare: Sicherheitscode eingeben: