• cheating at creating a silverlight media player


    i just put up another podcast video of how to "cheat" at creating a media player for silverlight.  have you been looking at some of these media experiences with all their fancy buttons and dvd player-type overlays, etc. but didn't want to take the time to code your own?  well, you don't have to :-) (man that sounds like an infomercial)

    in this podcast i demonstrate using expression media encoder as a tool that will essentially generate stub code for you.  now keep in mind that expression media encoder itself generates some pretty kick arse templates that may perfectly suit you.  but perhaps you want a player that has more branding or a mix of certain elements, etc.  well, still use expression media encoder for this.  let it output the template and then just change the xaml! 

    after you watch the podcast (subscribe links on the left panel of my web site if you are reading this in a reader), you'll hear me reference certain named elements for key function points of the player code that is generated.  i said i'd call them out here and that is what i'm doing :-).  these refer to the named elements in the xaml.  they could be canvas elements/groups or objects themselves like a rectangle.  as long as they are named specifically the code should work.  here's a list of the most popular that i've used and the heirarchy of any children objects they should have.  the names themselves are in bold, everything else is just description:

      • VideoWindow - this is the key element to display the media and must be a MediaElement node.  you can add clipping masks, etc. (as i show in the video), but you must have at least one MediaElement with this name
      • PlayPauseButton - the grouped canvas of your play and pause buttons.  named this way, the logic is already there to handle certain functions if you don't provide additional animations/timelines (like hide/show).
        • PlaySymbol - the symbol for the actual play button
        • PauseSymbol - the symbol for the actual pause button
        • PlayPauseButton_MouseEnter/MouseLeave/MouseDown - i'm only going to put this here once, but it applies to most of the other elements like StopButton and MuteButton, etc.  if you have a timeline named these, it will fire, if you don't some default actions will occur.
      • StopButton - the symbol for the actual stop button
      • Timeline - for displaying the playing progress of the media
        • TimeSliderDecoration - the element that shows the full progress
        • TimeSlider - the progress growing metere
        • TimeThumb - the arrow/object, etc. that shows the point in the progress and the user would drag to adjust the position
      • VolumeSlider - the elements making up the volume function
      • VolumeThumb - the arrow/object that shows the position of the current volume and the user would drag to adjust
      • VolumeUpButton/VolumeDownButton - if you were to use buttons for volume instead of a slider
      • MuteButton - self explanatory
      • CurrentTimeText - displays the time progress of the media element
      • ChapterArea - the area that would display the markers in the media file (dvd-style playback)
      • FullScreenArea - the full screen experience root node

    there are, of course, more elements to mess with and i'd encourage you to look at one of the more advanced template outputs and start sniffing around to see what you find.  the cool thing is that you don't have to have all of them.  you'll notice in the podcast that i only put 3 elements on there and there are no errors.  the output code handles if an element is there or not for you.

    i hope this helps get you started on creating great media experiences with silverlight and expression sooner!  if you want the sample player xaml that i used in the podcast, you can download that here.

    Friday, August 31, 2007 7:47 AM

    PostTypeIcon

Comments.

  • Josh said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Great screencast, I've created and exported a video player from media encoder and am gonna start tweaking the player but was wondering how I could create an overlayed start button like you find on youtube and soapbox type videos. My player just auto starts, so if you posted it via a blog like I did on my live space and sl streaming, it just keeps playing everytime the page loads.

    9/1/2007 8:41 AM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    josh:
    on the MediaElement add the attribute AutoPlay="False" and it won't automatically play.

    9/1/2007 10:11 AM
  • Gravatar
    # re: cheating at creating a silverlight media player


    Hi Tim
    Great screen cast, Thanks.
    Dou you know what it will take to make a custom media player, that plays a streamed vide file.

    10/5/2007 12:52 PM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    jakob: the same media player will play streaming URLs as well -- just change the mediaUrl attribute in the javascript file to your URL for the stream (as long as the stream is a windows media stream)

    10/5/2007 1:23 PM
  • hurry said:
    Gravatar
    # re: cheating at creating a silverlight media player


    >on the MediaElement add the attribute AutoPlay="False" and it won't automatically play.

    That works Josh but the problem is that it still starts downloaingd the wmv. My blog shows 10 posts at a time and if 6 posts contain silverlight videos of wmv files hosted on my server, all 6 videos will start downloading when someone loads the blog page leading to massive loss of bandwidth. Any solution for this?

    10/7/2007 7:02 AM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    hurry: this will still download -- autoplay:false doesn't change the fact the url reference is there, it just controls the playback. the file is (as you've found) still downloading. if you want to download when someone clicks play, you will want to look at setting the mediaelement uri source when the user clicks play.

    10/7/2007 2:37 PM
  • hurry said:
    Gravatar
    # re: cheating at creating a silverlight media player


    >you will want to look at setting the mediaelement uri source when the user clicks play.

    Thanks Josh. Please kindly explain how to do this exactly in what files and what code to change as it will help all the bloggers who want to embed Silverlight video. This will save a lot of bandwidth for the bloggers if they are hosting the Silverligtht videos. All flash videos have this feature and do not start auto-download when the post is loaded. I am a novice at Silverlight code.

    I had other few questions:

    (1) When I substitute another wmv-vc1 video not encoded by EME in place of my ouputted EME encoded video and give it the same file name, the silverlight players goes blank and does not play. Why is it like this? Do I change anything in the xaml?

    I saw in the MS presentations that Silverlight players will support wmv videos encoded by any software. How do I make one common Silverlight player which will play any wmv video and I can just change it's path in the mediaUrl setting in StartPlayer.js. Do your nicer player file support this? If Silverlight wants to compete with Flash in web video, they should make it easy like Flash to embed any video without having to compulsorily go through via the EME. Thanks.

    10/8/2007 1:18 AM
  • Vince said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Hi Tim,

    Would I have any problems integrating the video player I exported from Expression Encoder with a Silverlight 1.1 application that I'm creating?

    Is there any Silverlight 1.1 projects that can be created from Expression Encoder?

    10/26/2007 9:07 AM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    vince: you shouldn't if your silverlight application is separate from the template that encoder emits. the encoder emits javascript code only at the moment. if i didn't understand the question fully, let me know.

    10/26/2007 1:38 PM
  • scottalx said:
    Gravatar
    # re: cheating at creating a silverlight media player


    I've exported the player from microsoft expression encoder and it plays fine as the preview in the browser, but once I open the project in Blend I get a Invalid XAML warning and cannot view the player in design mode. Any suggestions?

    10/29/2007 10:43 AM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    scottalx: make sure you are using Blend 2 September Preview version -- that is the one that understands Silverlight.

    10/29/2007 10:46 AM
  • scottalx said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Hi Tim,

    You were right, that did it. I assumed I had Blend 2 as I just installed Blend from the microsof site last week.

    Thanks!

    10/29/2007 1:45 PM
  • dimdoom said:
    Gravatar
    # re: cheating at creating a silverlight media player


    nice get ready to see next step in tweaking:
    slide synchronisation to video
    and effect on slide click.
    https://simplywebcast.experience.orange.fr:445/pages/consultation.php?F1E6214A-F0FF-41E0-B56A-B5B985C073B6

    10/30/2007 6:47 AM
  • Mark Dahl said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Jakob above asks about streaming with this solution. I cannot seem to be able to get this player to work with anything other than media files on the local directory.

    For instance an ASX file in the local directory that links to a live stream does not work. I get the following error on the page: Unable to load text.asx

    This ASX file works if the file is in the local directory. But even linking to the same file via a web URL I get the error.

    Is there a fix for this?

    11/2/2007 8:56 PM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    mark: this is likely because of cross-protocol. when you run the player the address bar is probably c:\yadayada but is trying to access something eventually at an HTTP endpoint. you have to be using the same protocols for it to work. you can open the project as a web site in visual studio and hit F5 to run it under HTTP and then should work.

    11/3/2007 7:28 AM
  • Kaan said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Hi, Tim.

    I am most interested in using this "cheat" mainly for the ability to use the "preloading/buffering animation". Is it possible to grab this element for the provided code?

    11/4/2007 8:09 PM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    kaan: yes you could do this. if you generate one based on the templates, you can see the storyboards for the buffering animation, etc. and you could leverage those. the code to start/stop them would still have to be put in the right place when you'd want to use it. the javascript from encoder is mostly obfuscated, but essentially you are turning on/off the buffering animation you create.

    11/5/2007 7:38 AM
  • Mark Dahl said:
    Gravatar
    # re: cheating at creating a silverlight media player


    I do not have the option to add a Media Element in Expression Blend September Preview.

    What do I need to do to have that available to me.

    Mark Dahl

    11/5/2007 3:26 PM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    mark: click the asset library icon ">>" on the last option of the toolbar, then click the 'show all' checkbox on the upper right of the asset library...the mediaelement will show there

    11/5/2007 4:26 PM
  • Ravi said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Hey how to do this with SilverLight1.1 alpha in this it is being done by Silverlight 1.0 right so i want Timeline slider in Alpha 1.1 Help me out thanx in advance

    11/12/2007 4:14 AM
  • Gravatar
    # re: cheating at creating a silverlight media player


    What's the best way to have a list of videos played automatically one after another? And also to be able to easily re-sequence the video clips. FYI these clips will all be served up from a Windows Media Server.

    11/15/2007 6:08 PM
  • Gravatar
    # re: cheating at creating a silverlight media player


    Tim-
    This blog entry was immensely helpful! As are a number of other readers (Ravi and Vince) I am porting the Expression Encoder-generated Javascript to C# to use in Silverlight 1.1. I think what we're asking is:

    1) Has anyone done this already, to your knowledge?
    2) If not, is there a human-readable (i.e., not minified) version of the auto-generated BasePlayer.js class, to make this porting easier?

    Thanks in advance!
    -Rolf

    11/23/2007 8:29 PM
  • Ravi said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Ya Correct did any one tried to Do Player in C# if any one have it Please Share it here so that it will be Helpful for EveryOne (including me :))

    11/25/2007 11:46 PM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    variousartist: a mediaelement can have a source that is a playlist from a media server

    rolf/ravi/vince: i haven't seen any 1.1 templates yet and would hold off until another 1.1 update. regarding an unobfuscated baseplayer.js -- unfortunately i cannot distribute :-(

    11/26/2007 5:03 PM
  • Scott said:
    Gravatar
    # Sys.Silverlight.createDelegate


    Hello Tim,

    Great screen cast.

    I was wondering where can I find documentation on Sys.Silverlight.createDelegate? I've seen it in screen casts such as this, but haven't found anything official in the 1.0 SDK or even online.

    Thanks,

    - Scott

    11/29/2007 9:23 AM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    scott: great question. the createDelegate is really a function of the project templates, not the default API. if you create a silverlight project from expression blend for example, look at the default_html.js file it creates and you'll see the createDelegate signature and functionality...it is pretty lean.

    11/29/2007 9:45 AM
  • Matt said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Tim, I followed your screen cast step by step in order to create an audio player for my site. The problem I have is I can never get file uploaded on this page. I'm uploading a valid zip, but it never accepts the upload and always takes me back to the file upload page..https://silverlight.live.com/FileUpload.aspx

    any advice / is this problem known?

    12/3/2007 9:35 AM
  • Rishi Jain said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Hey I just want to play a silverlight video in SharePoint...
    Any Idea how to do it..
    The webpart just gives me a download error.. sometimes error code 1001,3000

    12/30/2007 11:14 PM
  • SC said:
    Gravatar
    # re: cheating at creating a silverlight media player


    I am trying to modify this to run as a simple, standalone mp3 player with Silverlight 1.0. You provided the XAML but I didn't see the JavaScript that would be associated with the control clicking/hiding/etc. Where can I find that?

    Great work, the video HOWTO is excellent.

    Thanks.

    1/2/2008 10:21 AM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    SC: check out this follow up post that contains a document explaining the various parts as well: http://timheuer.com/blog/archive/2007/12/18/creating-silverlight-media-player-skins-expression-encoder.aspx

    1/2/2008 10:59 AM
  • Matt said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Tim,
    Agreed, great screencast. After I encoded the file I followed Tim Sneath's steps to upload the file to my Silverlight Applications; http://blogs.msdn.com/tims/archive/2007/04/30/silverlight-streaming-is-now-live.aspx.

    I uploaded my application, but when I preview the application in the test page, I get a few JS errors and the player doesn't render.

    Should I not be using Tim Sneath's blog? I got the VideoPlayer sample app from the Quickstarts and it seems to be remarkably different. If you could point me in the right direction on encoding, it would go a long way. Thanks!

    1/3/2008 10:15 AM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    matt: see my follow-up here: http://timheuer.com/blog/archive/2007/12/18/creating-silverlight-media-player-skins-expression-encoder.aspx and this plugin which automates everything that TimS' blog post does for you -- his blog post is valid still, but this plugin to encoder does it all automatically in one click

    1/3/2008 4:50 PM
  • Anjali said:
    Gravatar
    # re: cheating at creating a silverlight media player


    Where do you see the timeline controls that have been created, where are the event handlers. I can't find them in any of the files that i get from encoding the video.
    Thanks

    1/15/2008 7:25 AM
  • timheuer said:
    Gravatar
    # re: cheating at creating a silverlight media player


    anjali: the event handlers are all storyboards in the player.xaml file as are the timeline controls are in that xaml file as well -- look at the reference document referred to in this post http://timheuer.com/blog/archive/2007/12/18/creating-silverlight-media-player-skins-expression-encoder.aspx as well.

    1/15/2008 9:14 AM
  • dffdw said:
    Gravatar
    # re: cheating at creating a silverlight media player


    grty

    1/22/2008 1:14 AM
  • Gravatar
    # re: cheating at creating a silverlight media player


    Tim,

    Awesome! Just plain awesome!

    FYI: I have an article here:

    http://www.codeproject.com/KB/scrapbook/HowToCreateArticleVideos.aspx

    That teaches how to create tutorial vidoes that meeting the requirements of free Silverlight Streaming, max bitrate 300KB.

    Let me know what you think.

    I'll update my article and point the readers to your blog for creating their own players.

    Thanks again for your great post!

    Karl

    1/28/2008 8:26 AM
  • Gravatar
    # re: cheating at creating a silverlight media player


    Hi, I am beating down the doors trying to find a media player that will play preferably flash video (harder to steal) and flash audio and get this... open or trigger a reader. This would be a web app for a membership site. NOT desktop. ANY thought? I have looked at open source (songbird), considered "orange" and now found this silverlight but don't see the fit. I do have a respectable budget but not any where near what some of these "companies" want to do it for. I've got 4-5K to get it done. It would have to mange about 1000 files to start and have an easy user interface. Sorry to post such a long post but i am hopin a pro like you might have some more insight.

    2/6/2008 10:19 PM
Comments have been closed on this topic.