Embedding YouTube in Silverlight application

Ever wanted to embed HTML as part of the Silverlight app? Well Silverlight 4 supports an HTML block as part of the Silverlight app only in “Out Of Browser app”. In this article I will show how to embed YouTube player in an “in browser Silverlight app”.

Here we will create a YouTube Silverlight control that holds the player, and support actions like play stop etc.

There are articles (see references) that show how to insert html content in a Sliverlight application; it is done by creating a transparent Silverlight app onto the HTML and adding html content on the document of the page itself.

Overview

The main window has a list that holds the Players control. When the user press the “Add YouTube” button a YouTubeChannel control is created and added to the list. The URL of the video is entered, and the Play, Stop, Volume, Position controls interact with the player.

Let’s see how to create a UserControl that helps integrate the HTML and supports moving, scaling and interaction with the HTML. In our case the UserControl will host a YouTube player and control it.

Make the Silverlight control transparent

In the page that hosts the Silverlight control we add to the Sliverlight object the :

  <div id="silverlightControlHost">

       

   width="100%" height="100%">

                     

                     

                     

                     

                     

                     

                   …

…

   </div>

 

 

The player UserControl

 HTMLBlock: Creates a div in the page document and sets its inner HTML. it also controls the location and size of the div.

·         YouTubePlayer: Inherits from the HTMLBlock and provide the inner HTML that the div will show, in our case it will embed the YouTube Player; He is responsible for interacting with the YouTube object using Javascript for play stop position and volume.

·         YouTubeChannel: A UserControl the holds the YouTubePlayer and other controls like the volume, start, stop, position and connect them with the YouTubePlayer.

 

Create the YouTubeControl

the HTMLBlock creates the div as following:

private void loadView()

        {

            HtmlDocument doc = HtmlPage.Document;

            _body = doc.GetElementsByTagName("body")[0] as HtmlElement;

            if (_body != null && _container == null)

            {

                _container = doc.CreateElement("div");

                _container.SetStyleAttribute("position", "absolute");

                _container.SetStyleAttribute("background-color", "gray");

                _container.SetStyleAttribute("overflow", Overflow ? "auto" : "hidden");

                _body.AppendChild(_container);

                refreshView();

            }

        }

 

The HTMLBlock (UserControl) manage a div that is attached the main document, and interact with that div. the YouTube control inherits from the HTMLBlock and puts the YouTubePlayer object inside the div and interact with the player.

Then sets the div position

private void refreshView()

        {

              ….

….

                UIElement root = Application.Current.RootVisual;

                GeneralTransform gt = TransformToVisual(root);

                Point pos = gt.Transform(new Point(0, 0));

                _container.SetStyleAttribute("left", pos.X + "px");

                _container.SetStyleAttribute("top", pos.Y + "px");

                _container.SetStyleAttribute("width", (ActualWidth) + "px");

                _container.SetStyleAttribute("height", ActualHeight + "px");

                _container.SetAttribute("width", (ActualWidth) + "px");

                _container.SetAttribute("height", ActualHeight + "px");

        }

 

 

The YouTubePlayer creates a unique name for the Web YouTube object (the real YouTube player object) so this name will be a reference for the JavaScript, also the URL for the Movie we want.

Read more: בלוג היועצים של מיקרוסופט ישראל

Posted via email from Jasper-net