Silverlight: Video on my PhotoAlbum website / Going in holidays

.NET, Personal, Silverlight, Technical stuff, Website, WPF
See comments

Silverlight video on my PhotoAlbum website

You can now watch videos on my PhotoAlbum using Silverlight!! Currently, two pages have video: Pune, India and Calcutta Rescue’s projects in Kolkata. To start the video, locate the thumbnails marked with a “movie” label, and click them.

Modified player.xaml
Modified player.xaml

I spent a few hours this week tweaking and learning to know the Silverlight video player created when you encode a video using the Expression Media Encoder application. I modified the player.xaml and I wrote some JavaScript to enhance the features. For example, I added a zoom function, which allows the viewer to make the player bigger or smaller depending on his taste and his screen. I also added an animation to display/hide the player. By default, the player is hidden, but if you click on a thumbnail, it will appear on the page with a XAML animation.

During the tweaking process, I tried a few tricks and I was delighted to find that contrarily to other video solutions I know (ActiveX based, Java applets, etc…), it’s very easy to manipulate the DIV containing the XAML player, and for example you can apply some CSS opacity to it, you can move it around the page, etc… Eventually I decided to use a XAML animation for the fade-in and fade-out because it’s smoother (and easier to create using Expression Blend), but the same effect could have been achieved using JavaScript and CSS. Other effects are of course not possible using JavaScript and CSS, for example rotations, so resorting to XAML animations is probably the better choice. Since these animations can be triggered from JavaScript, there is no limit to the interaction between the web page and the XAML player.

The integration in my PhotoAlbum is still in a very early alpha stage, with quite some manual work to integrate a new movie in an existing web page. After my holidays, my goal is to integrate this in the existing ASP.NET control so that the code (JavaScript and HTML) is automatically added to the produced pages. Also, for the moment I have to put the videos on my site and I cannot use the Silverlight Streaming website, because I didn’t totally understand the JavaScript object structure they use in the Silverlight Streaming applications, and I don’t have time to look further for the moment.

Features of the modified player:

  • Clicking on a thumbnail will bring the movie player in the foreground with a fade-in animation.
  • New look&feel: I wanted to see how easy it is to modify the player’s look&feel, and it’s very easy. DISCLAIMER: I am not a graphics designer. I happen to like my player’s new look&feel, but maybe it’s a bit too bright. I love that you can change the shape of the video window!
  • All usual controls are hidden on the player. Move to mouse on the player to see the buttons play, stop, forward, etc…
  • Chapters are available on the player. Click the button (1) to display the chapters.
  • New buttons: Zoom in, Zoom out, Close: These buttons trigger a XAML animation to zoom in the movie, respectively zoom out or close the player.
  • I modified the “buffering graphics” control, because it was too big and yellow for my taste. Also, I corrected a bug in the script which caused the “buffering” animation to never start.
  • The movie will start playing only when the movie player is displayed (at the end of the fade-in animation) and it will pause when the player is hidden.

TODO after the holidays:

  • Use Silverlight Streaming instead of my own server
  • Handle multiple movies on one page
  • Integrate in the Thumbnails control, which creates the PhotoAlbum webpages automatically according to the content of the folders and to some XML configuration files.
  • Write a more detailed post about the process to modify the existing player.xaml. I took a lot of notes during the process, as well as screenshots, and I will post an article about this on my website in August.

I’d be interested to learn about your experiences with the video player when Silverlight is not installed. I tested on a few machines, and it went well, but I’d love to hear if you had problems with the installation. Let me know using the feedback form!

Going in holidays

On a side note, it’s holiday time for me! We’re leaving tomorrow for two weeks. We fly to Palermo, Sicily, Italy first, and from there we will rent a car and drive around the island. We will stay in bed and breakfasts and hopefully have a great time visiting Sicily! I am very happy to have that occasion to relax, and believe it or not, I don’t take a laptop! (well, I take my PDA, but that doesn’t count, does it?)

See you end of July!

This post was imported from my old blog. Original comments screenshot:

Previous entry | Next blog entry

Comments for Silverlight: Video on my PhotoAlbum website / Going in holidays