This extended version of embedded YouTube™ API demonstrates additional customization features, namely:
Start-up options could be set by using Web Query; as an example, the following query sets the autoplay option and selected item index=2 (see the sample screenshot taken from the functional demo here).
Also, the start-up time for each item could be set programmatically. Notice two command buttons at the bottom of the sample screenshot in Figure 1; clicking on these buttons when the actual application is running will cause the playback to start at a certain predefined position (15 sec and 60 sec correspondingly).
This project extends the functionality of embedded YouTube Video Player API described in my previous article, published here (see the sample screenshot in Figure 2 related to the previous project).
You could also see the functional demo of Data-Bound YouTube™ API here.
Project includes:
Sample Web Page includes a Literal1 control, serving as a JavaScript container and a populated DropDownList control with two sample items, serving as a simple playlist:
Literal1
DropDownList
<%@ 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: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 /> More Demo available at: www.webinfocentral.com <hr /> </form> </body> </html>
//**************************************************************************** // Module : Default.aspx.cs // Type : ASP.NET web page code behind // Developer : Alexander Bell (Infosoft International Inc) // 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 //**************************************************************************** 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 }
Note: try-catch blocks in Page_Load event procedure are inserted for future development.
try
catch
Page_Load
//****************************************************************************** // Module : YouTubeScript.cs // Author : Alexander Bell // Copyright : 2009 Infosoft International Inc // 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 } ///************************************************************************************
This technique has been tested against 4 major browsers:
Other points of interest may include a video playback customization, related to the linked (not embedded) YouTube video items. These customization technique allows to:
