Code Voyeur
RSS
Languages MVC ORM About Roadmap Contact Site Map RSS Sample Code Presentations Snippets dll Hell .net

ASP.NET MVC HtmlHelper Extensions for the JW FLV Media Player

Embedding an FLV Media player involves using either object/embed tags or using JavaScript, typically through the popular SWFObject library.
<embed src="../Content/Flash/Player.swf",
            width="400", height="300",
            flashvars="file=video.flv&autostart=false"
            allowscriptaccess="always"allowfullscreen="true" />
The above example uses the embed tag, the example below demonstrates use of SWFObject.

<script type='text/javascript'>
    swfobject.embedSWF("../Content/Flash/Player.swf", "preview", "400", "300", "9.0.0", 
                                    {allowscriptaccess:"always",allowfullscreen:"true"}, 
                                    {file:"video.flv"});
</script>
The embed approach is simple, though it has some limitations (Flash detection, obsolescence, etc.). It is included for completeness.
public static string FlashPlayerEmbed(this HtmlHelper html, string pathToPlayer, string pathToContent, int width, int height, object parameters) {
    ...
}
This extension method simply takes the path to the player, media, width and height along with a hash of optional parameters.
StringBuilder sb = new StringBuilder();
sb.AppendFormat(@"<embed src=""{0}"", width=""{1}"", height=""{2}"", {3} />", pathToPlayer, width, height, getTagAttributes(parameters));
return sb.ToString();
From those values, the embed tag is built. The getTagAttributes method is a utility function for converting an object to an html tag attribute string.
private static string getTagAttributes(object source) {
           
    PropertyInfo[] properties = source.GetType().GetProperties();

    StringBuilder sb = new StringBuilder();
    for (int i = 0; i < properties.Length; i++) {
        sb.AppendFormat("{0}=\"{1}\"",
                        properties[i].Name,
                        properties[i].GetValue(source, null));
    }

    return sb.ToString();
}
The View code is simple:
<%= Html.FlashPlayerEmbed(ResolveClientUrl("~/Content/Flash/Player.swf"), "", 400, 300,
    new { flashvars = "file=video.flv&autostart=false", allowscriptaccess = "always", allowfullscreen = "true" })%>
The SWFObject code is only slightly more complex and includes an overload to allow SWFObject.js to be embedded by the extension or by hand.
public static string FlashPlayer(this HtmlHelper html, string pathToPlayer, string containerID, int height, int width, string version, object flashVars, object parameters) {
    return FlashPlayer(html, null, pathToPlayer, containerID, height, width, version, flashVars, parameters);
}

public static string FlashPlayer(this HtmlHelper html, string pathToSWFObject, string pathToPlayer, string containerID, int height, int width, string version, object flashVars, object parameters) {
    
     StringBuilder sb = new StringBuilder();

     if (! string.IsNullOrEmpty(pathToSWFObject))
         sb.AppendFormat("<script type=\"text/javascript\" src=\"{0}\"></script>", pathToPlayer);
    ...
}
The SWFObject embedSWF method has five required args, which are required by the extension. height, width and (Flash) version should be self explanitory. The containerID is the id of the containing element (P or DIV usually) to which the player is written. The flashVars and parameters are anonymous objects that are used to populate the SWFObject flashvars and params objects (JavaScript Object instances).
string parametersHash = getJSObject(parameters);
string flashVarsHash = getJSObject(flashVars);
Similar to the getTagAttributes utility method, getJSObject takes the anonymous objects and returns a string representing a JavaScript Object.
private static string getJSObject(object source) {

    PropertyInfo[] properties = source.GetType().GetProperties();

    StringBuilder sb = new StringBuilder();
    for (int i = 0; i < properties.Length; i++) {
        sb.AppendFormat("{0}:\"{1}\"{2}",
                        properties[i].Name,
                        properties[i].GetValue(source, null),
                        i != properties.Length - 1 ? "," : "");
    }

    return sb.ToString();
}
Finally, the call to swfobject.embedSWF is constructed from the passed in values.
sb.AppendFormat("swfobject.embedSWF(\"{0}\", \"{1}\", \"{2}\", \"{3}\", \"{4}\", {{{5}}}, {{{6}}});", pathToPlayer, containerID, height, width, version, parametersHash, flashVarsHash);                       
sb.AppendFormat("</script>");
return sb.ToString();
The View code is simply:
 <%= Html.FlashPlayer(ResolveClientUrl("~/Content/Flash/Player.swf"), "preview", 400, 300, "9.0.0",
                                 new { file = "video.flv" }, new { allowscriptaccess = "always", allowfullscreen="true" })%>

Download Sample Project

References

JW FLV Media Player at LongTail Video
SWFObject Library
Article Posted: Friday, May 29, 2009

Leave a Comment


Contact Code Voyeur about this article.