13 people following this project (follow)

Project Description
ASP.NET Embedded Video Player (YouTube™ API, C#)

ARTICLES ON RIA TOPIC

  1. Rich internet applications, part 1: embedding YouTube™ video player into web page
  2. Rich internet applications, part 2: Silverlight™ media player
  3. Rich internet applications, part 3: HTML 5 video player
  4. How to customize YouTube video playback

DEMO:

  1. Embedded YouTube
  2. Embedded YouTube with Playlist
  3. Silverlight Media Player
  4. NEW!!!  WebTV Beta (Embedded YouTube Video Player, ASP.NET API)

ASP.NET API, writtent in C#, enables customization of the embedded YouTube™ video player, namely:

  • Setting the startup options
  • Selecting the item from the playlist,
  • Setting the autoplay mode
  • Setting player's dimension (W/H)
  • Changing the border options
  • Starting the video at predefined time

Start up options could be set by using Web Query; as an example, the following query sets autoplay option and selected item index=2 (see the sample screenshot following):
YouTubeSampleScreenshot.jpg

Fig.1. Sample screenshot of embedded Video Player (Anastasia Volochkova, Russian prima ballerina dancing to "Adiemus")

NOTE: ALL CONTENT/SAMPLES ARE SHOWN FOR INFORMATION PURPOSE ONLY.

NEW! Check the new version of embedded YouTube player implementing the latest HTML5/CSS3 features:

Project contains:

1. Default Web page "Default.aspx" with corresponding code behind: both to be placed in Application root directory (ASP.NET 2.0+)
2. Class Library "youTubeEmbeddedPlayer.dll" to be placed in ASP.NET "bin" directory
3. Ajax Library file (AjaxControlToolkit.dll) to be placed in Bin directory

Sample Web Page contains a Literal1 control serving as a script container and a DropDownList control serving as a simple playlist:

(NOTE: ALL CONTENT IS SHOWN FOR DEMO PURPOSE ONLY)

<%@ Page Language="C#" 
AutoEventWireup="true"  
CodeFile="Default.aspx.cs" 
Inherits="_DEMO" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register assembly="AjaxControlToolkit" 
namespace="AjaxControlToolkit" 
tagprefix="cc1" %>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">
        <title>ASP.NET Embedded Video Player | YouTube DEMO</title>
    </head>

    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="Conditional" >
            <ContentTemplate> 
                <div>
                    <!-- ALL CONTENT IS SHOWN FOR DEMO PURPOSE ONLY-->
                    <asp:DropDownList ID="cmbPlaylist" runat="server" AutoPostBack="True">
                        <asp:ListItem Value="x_4CNvG1Q_M">
                        Anastasia Volochkova dancing (Adiemus)
                        </asp:ListItem>
                        
                        <asp:ListItem Value="raRaxt_KM9Q">
                        Sound Of Silence (Masters of Chant)
                        </asp:ListItem>
                        
                        <asp:ListItem Value="8qSeYLhe09s">
                        For Whom The Bell Tolls (Bee Gees)
                        </asp:ListItem>
                    </asp:DropDownList>
                    
                    <br /><br />
                    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                </div>

                <asp:Button ID="Button1" runat="server" 
                Text="START AT 15 SEC" onclick="Button1_Click" />
                  
                <asp:Button ID="Button2" runat="server" 
                Text="START AT 60 SEC" onclick="Button2_Click" />
            
            </ContentTemplate>
          </asp:UpdatePanel>
          
          <hr />
          <h4>Sample Demo: Anastasia Volochkova, Russian prima ballerina is dancing "Adiemus"</h4>
          <h4>Initial settings: 640x505, autoplay=0</h4>
          <hr />
          <h4>
              More RIA Demo available at: 
              <a href="http://www.webinfocentral.com/RESOURCES/YouTubeMusicVideo.aspx" 
              target="_blank">www.webinfocentral.com</a>
          </h4>
          <hr />
        </form>
    </body>
</html>

Code behind page:

//****************************************************************************
// Module           :   Default.aspx.cs
// Type             :   ASP.NET web page code behind
// Developer        :   Alexander Bell (Infosoft International Inc)
// DateCreated      :   06/29/2009
// LastModified     :   10/18/2009

// Description      :   YouTube API for ASP.NET (DEMO)
//****************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//****************************************************************************

//****************************************************************************
// TERMS OF USE     :   ALL CONTENT IS SHOWN FOR DEMO PURPOSE ONLY
//                  :   You can use it at your sole risk
//****************************************************************************
using System;

public partial class _DEMO : System.Web.UI.Page
{
    #region init settings
    // player width
    private int _W = 640;

    // player height
    private int _H = 505;

    // autoplay disabled
    bool auto = false;
    #endregion

    #region Page Load event
    protected void Page_Load(object sender, EventArgs e)
    {
        
        if (!IsPostBack)
        {
            #region Start mode customization via Web Query String
            int idx = 0;
            string qry = "";

            // Web Query to set autoplay option
            try {
                qry = "auto"; 
                qry = (Request.QueryString[qry] == null) ? "" : Request.QueryString[qry];
                if (qry != "") { auto = Boolean.Parse(qry); }
            } catch { }

            // Web Query to set item index
            try {
                qry = "item"; 
                qry = (Request.QueryString[qry] == null) ? "" : Request.QueryString[qry];
                if (qry != "") { idx = int.Parse(qry); }
            } catch { }
            #endregion

            // set selected index
            cmbPlaylist.SelectedIndex = idx;

            // generate script on page load
            Literal1.Text = YouTubeScript.Get(cmbPlaylist.SelectedValue, auto, _W, _H);
        }
        else
        {
            // generate script on page postback
            Literal1.Text = YouTubeScript.Get(cmbPlaylist.SelectedValue, false, _W, _H);
        }
    }
    #endregion

    #region User events
    /// <summary>
    /// Script to start video at predefined time, change border color
    /// </summary>
    protected void Button1_Click(object sender, EventArgs e)
    {
       // set start time = 15 sec, change border colors
        Literal1.Text = 
        YouTubeScript.Get(cmbPlaylist.SelectedValue, true, 
        _W, _H, true, "maroon", "", 15);
    }

    /// <summary>
    /// Script to start video at predefined time, remove border
    /// </summary>
    protected void Button2_Click(object sender, EventArgs e)
    {
        // set start time = 60 sec, remove border
        Literal1.Text =
        YouTubeScript.Get(cmbPlaylist.SelectedValue, true,
        _W, _H, false, "", "", 60);
    }
    #endregion
}
Class Library source code
//******************************************************************************
// Module           :   YouTubeScript.cs
// Author           :   Alexander Bell
// Copyright        :   2009 Infosoft International Inc
// Date Created     :   06/29/2009
// Last Modified    :   07/18/2009
// Version          :   1.0.0.1
// Description      :   YouTube Player Javascript generator

//******************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//******************************************************************************

//******************************************************************************
// TERMS OF USE     :   This module is copyrighted.
//                  :   You can use it at your sole risk provided that you keep
//                  :   the original copyright note.
//******************************************************************************

using System;
using System.Text;

///*****************************************************************************
/// <summary>
/// Generate Javascript to embed YouTube Video Player in ASP.NET web page
/// </summary> 
public static class YouTubeScript
{
    #region YouTube Player default script: no autoplay, 320x240
    /// <summary>
    /// YouTube Player default script: no autoplay, 320x240
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">int</param>
    /// <returns>string</returns>
    public static string Get(string id)
    { return Get(id, false, 320, 240); }
    #endregion

    #region YouTube Player script w/autoplay option (320x240)
    /// <summary>
    /// YouTube Player script w/autoplay option (320x240)
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <returns>string</returns>
    public static string Get(string id, bool auto)
    { return Get(id, auto, 320, 240); }
    #endregion

    #region YouTube Player script w/autoplay option (320x240)
    /// <summary>
    /// YouTube Player script w/autoplay option (320x240)
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">int</param>
    /// <returns>string</returns>
    public static string Get(string id, int auto)
    { return Get(id, ((auto == 1) ? true : false), 320, 240); }
    #endregion

    #region YouTube Player script w/selectable: autoplay and W/H
    /// <summary>
    /// YouTube Player script w/selectable: autoplay and W/H options
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <returns>string</returns>
    public static string Get(string id, bool auto, int W, int H)
    { return Get(id, auto, W, H, true); }
    #endregion

    #region YouTube Player script w/selectable: autoplay, W/H and default border
    /// <summary>
    /// YouTube Player script w/selectable: autoplay, W/H, default border color 
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <param name="Border">bool</param>
    /// <returns>string</returns>
    public static string Get(string id, bool auto, int W, int H, bool Border)
    { return Get(id, auto, W, H, Border, "0x2b405b", "0x6b8ab6",0 ); }
    #endregion

    #region YouTube Player script w/selectable: autoplay, W/H and border color
    /// <summary>
    /// YouTube Player script w/selectable: autoplay, W/H and border color
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <param name="Border">bool</param>
    /// <param name="C1">string</param>
    /// <param name="C2">string</param>
    /// <returns>string</returns>
    public static string Get
            (string id,
            bool auto, 
            int W, 
            int H, 
            string C1, 
            string C2)
   { return Get(id, auto, W, H, true, C1,C2, 0); }
    #endregion

    #region YouTube Player script w/selectable: autoplay, W/H and border color
    /// <summary>
    /// YouTube Player script w/selectable: autoplay, W/H and border color
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <param name="Border">bool</param>
    /// <param name="C1">string</param>
    /// <param name="C2">string</param>
    /// <returns>string</returns>
    public static string Get
            (string id,
            bool auto,
            int W,
            int H,
            bool Border,
            string C1,
            string C2, 
            int Start)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append(@"<embed src='http://www.youtube.com/v/");

        // select the youTube item to play
        sb.Append(id);

        // set autoplay options (indicates number of plays)
        if (auto) sb.Append("&autoplay=1");

        // no related items to display
        sb.Append("&rel=0");

        // set border color 1 and 2
        if (Border)
        {
            sb.Append("&border=1");
            sb.Append("&color1=" + @C1);
            sb.Append("&color2=" + @C2);
        }

        // start position
        if (Start>0) sb.Append("&start=" + Start.ToString());
        
        // allow full screen
        sb.Append("&fs=1");

        // closing single quote after parameter list
        sb.Append("' ");

        
        sb.Append("type='application/x-shockwave-flash' ");

        // add id
        sb.Append("id='youTubePlayer" + DateTime.Now.Millisecond.ToString() + "' ");
        sb.Append("allowscriptaccess='never' enableJavascript ='false' ");

        // set parameters: allowfullscreen
        sb.Append("allowfullscreen='true' ");

        // set width
        sb.Append("width='" + W.ToString() + "' ");

        // set height
        sb.Append("height='" + H.ToString() + "' ");

        sb.Append(@"></embed>");

        // get final script
        string scr = sb.ToString();

        sb = null;
        return scr;
    }
    #endregion
}
///*****************************************************************************************

ADDITIONAL ONLINE RESOURCES: 'HOW-TO':

  1. Scientific Calculator ZENO-5000, User Manual
  2. Scientific Calculator ZENO-5000, Design Notes
  3. How to select web browser and check its capabilities
  4. How to use online geocoders and interactive maps
  5. Search engine optimization and online concordance calculator

POPULAR ARTICLES:

  1. Rich internet applications, part 1: embedding YouTube™ video player into web page
  2. Rich internet applications, part 2: Silverlight™ media player
  3. Rich internet applications, part 3: HTML 5 video player
  4. Personal computer 2011: mostly USB 3.0, SATA 3.0, DDR 3 plus SSD/HDMI

SAMPLE PROJECTS':

  1. 3 Fractions Calculator (#1 on Google!)
  2. Interactive Motosport/NASCAR Map, Microsoft Bing™

Last edited Jun 26 2011 at 6:15 AM by DrABELL, version 21