Media Player Renderer

• Download demo + source - 172.9 KB

Introduction

Hello again, hope you say it too in return. As you've read the title (if not, read it now *please*), you might know what all this is about.

A few weeks back, I needed a Media Player for my site, I already had one and that was built in Flash. But in first beta test, it didn't work as I thought. And I didn't try to make it work because Flash eats time like a fat guy famished for decades. So instead, I began searching for a better Player and finally I found Silverlight. At the beginning, I thought that not many users use Silverlight, it’s not gonna work. However, when I had a real hard look at Player, it amazed me a lot. I mean C# code works on client side, this was fabulous and exactly what I always imagined. Now, I turned down the way I thought, if not many users uses SL, soon they sure will. As Silverlight is going to be the future.

But if you're a newbie of SL, you will end up confused and some head hits on wall because there are too many things that were created for SL Media Player. I've spent several days just to know what’s going on in Silverlight’s world.

The SL 2 Media Player was using JavaScript to get it to work. But in SL 3, the devs removed Media Player control from SDK and provided us a better way that was using object tag plus no more JavaScript. And in fact I liked this way but couldn't find a decent way to create the MP. I searched a lot but all libraries were using old techniques to create the MP or just using a method that takes some params and returns the HTML. Even though it works, it was not what I wanted. It was very infuriating as I was searching for a long time and found nothing special. So, I preferred to write my own control. Since it's rare, it would be nice to share it. I have thousands of things to publish but don't have one precious thing and you certainly know what it is.

Anyway, with this control you can add playlist, add chapters, get pure HTML and more, you will see...

I'll only focus on the cream of the control, not on everything. Furthermore, there is nothing about code explanation. It’s just a simple Media Player control that renders object tag using the provided properties’ values and this is very basic. I've written the explanation as a summary for stiff properties and comments with code.

Before I continue, I would recommend you know about the following things for better understanding of the source (if you've intended to):

• IStateManager
• StateManagedCollection

Behind the Scene

The above class diagram shows the entire control.

Using the Code

You can use any of the following 3 techniques to display this control on the page.

1. Direct add to aspx page 
2. Add using LiteralControl 
3. Add in any container control

For the first one, you have to write like this:

<XControlsSL:MediaPlayerSL ID="MediaPlayer1" 
	runat="server" Height="240px" Width="320px" 
                                   Source="Files/MediaPlayerTemplate.xap">
    <Playlist AutoLoad="true" AutoPlay="false" 
    	StretchMode="UniformToFill">
        <Items>
            <XControlsSL:PlaylistItem Title="Title" 
		Description="Description" MediaSource="Write your video url here">
                <Chapters>
                    <XControlsSL:Chapter Position="1.421" 
			Title="X title" ThumbnailSource="thumbnail.jpg" />
                    <XControlsSL:Chapter Position="40.743" 
			Title="X title 2" ThumbnailSource="thumbnail2.jpg" />
                    <XControlsSL:Chapter Position="180.165" 
			Title="X title 3" ThumbnailSource="thumbnail3.jpg" />
                </Chapters>
            </XControlsSL:PlaylistItem>
        </Items>
    </Playlist>
</XControlsSL:MediaPlayerSL>

You can simply add playlists, chapters and other related properties. As you have noticed, Position has 1.421, 40.743...well, it’s in seconds and the decimal part goes for milliseconds.

NOTE: Add both the following lines in your web.config (configuration > system.web > pages > controls) if you are going to use it in aspx page.

<add tagPrefix="XControlsSL" namespace="XSystem.Web.Silverlight" 
	assembly="XSystem.Web.Silverlight"/>
<add tagPrefix="XControlsSL" namespace="XSystem.Web.Silverlight.MediaPlayer" 
	assembly="XSystem.Web.Silverlight"/>

The second and third techs look like:

protected void Page_Load(object sender, EventArgs e)
{
    MediaPlayerSL mediaPlayer = new MediaPlayerSL();
    mediaPlayer.ID = "MediaPlayer2";
    mediaPlayer.Source = MediaPlayer1.Source;

    PlaylistItem playListItem1 = new PlaylistItem("Title", "Description", "
	Write your video url here");
    playListItem1.Chapters.Add(new Chapter(1.421, "X title", "thumbnail.jpg"));
    playListItem1.Chapters.Add(new Chapter(40.743, "X title 2", "thumbnail2.jpg"));
    playListItem1.Chapters.Add(new Chapter(180.165, "X title 3", "thumbnail3.jpg"));

    mediaPlayer.Playlist.AutoLoad = true;
    mediaPlayer.Playlist.AutoPlay = false;
    mediaPlayer.Playlist.StretchMode = Playlist.StretchModeType.UniformToFill;
    mediaPlayer.Playlist.Items.Add(playListItem1);

    //tech 2
    Panel2.Controls.Add(new LiteralControl(mediaPlayer.HTML));
 
    //tech 3
    mediaPlayer.ID = "MediaPlayer3";
    Panel3.Controls.Add(mediaPlayer);
}

Now the output of the first tech will look pretty nice:

<object id="MediaPlayer1" data="data:application/x-silverlight-2," 
           type="application/x-silverlight-2" width="320px" height="240px">
	<param name="source" value="Files/MediaPlayerTemplate.xap" />
	<param name="background" value="White" />
	<param name="minRuntimeVersion" value="3.0.40624.0" />
	<param name="autoUpgrade" value="true" />
	<param name="enableHtmlAccess" value="true" />
	<param name="enableGPUAcceleration" value="true" />
	<param name="initparams" value='playerSettings =
	<Playlist>
		<AutoLoad>true</AutoLoad>
		<AutoPlay>true</AutoPlay>
		<DisplayTimeCode>false</DisplayTimeCode>
		<EnableCachedComposition>true</EnableCachedComposition>
		<EnableCaptions>true</EnableCaptions>
		<EnableOffline>true</EnableOffline>
		<EnablePopOut>true</EnablePopOut>
		<StartMuted>false</StartMuted>
		<StretchMode>None</StretchMode>
		<Items>
			<PlaylistItem>
				<AudioCodec></AudioCodec>
				<Description>Description</Description>
				<FileSize>0</FileSize>
				<FrameRate>0</FrameRate>
				<Height>0</Height>
				<IsAdaptiveStreaming>false</IsAdaptiveStreaming>
				<MediaSource>Write your video url 
						here</MediaSource>
				<ThumbSource></ThumbSource>
				<Title>Title</Title>
				<VideoCodec></VideoCodec>
				<Width>0</Width>
				<Chapters>
					<ChapterItem>
						<Position>1.421</Position>
						<ThumbSource>thumbnail.jpg
						</ThumbSource>
						<Title>X title</Title>
					</ChapterItem>
					<ChapterItem>
						<Position>40.743</Position>
						<ThumbSource>thumbnail2.jpg
						</ThumbSource>
						<Title>X title 2</Title>
					</ChapterItem>
					<ChapterItem>
						<Position>180.165</Position>
						<ThumbSource>thumbnail3.jpg
						</ThumbSource>
						<Title>X title 3</Title>
					</ChapterItem>
				</Chapters>
			</PlaylistItem>
		</Items>
	</Playlist>'/>
	<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
	      style="text-decoration:none;">
		<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
		        alt="Get Microsoft Silverlight" style="border-style:none;" />
	</a>
</object>

Points of Interest F.A.Q

However, you may not wish to show or render all these chapters and playlist info as HTML. Instead, you can use CustomInitparams property to set the Initparams and the other specified information will be ignored. But for that, you must know how to create your own Media Player template.

Example: You have saved all the video details in your DB's Table and assigned a unique ID as well. Assume you want to display a video whose ID is 1234, now you can set CustomInitparams to something like “VideoID=1234” and in the MP template, you can get this ID and call your Web Service to retrieve the rest of the details. And in this way, you can hide playlist information from the client.

And this time, the HTML will be trimmed to:

<object id="MediaPlayer1" data="data:application/x-silverlight-2," 
           type="application/x-silverlight-2" width="320px" height="240px">
	<param name="source" value="Files/MediaPlayerTemplate.xap" />
	<param name="background" value="White" />
	<param name="minRuntimeVersion" value="3.0.40624.0" />
	<param name="autoUpgrade" value="true" />
	<param name="enableHtmlAccess" value="true" />
	<param name="enableGPUAcceleration" value="true" />
	<param name="initparams" value="VideoID=1234" />
	<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
	      style="text-decoration:none;">
		<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
		        alt="Get Microsoft Silverlight" style="border-style:none;" />
	</a>
</object>

Q. Thumbnail doesn't appear?

A. Use JPG format instead, if the problem persists, use absolute URL. e.g. http://www.abc.com/abc.jpg.