YouTube™嵌入式视频播放器：扩展API（C#）

DrABELL

4.88/5 (24投票s)

2009 年 10 月 2 日

Ms-PL

4分钟阅读

222849

YouTube™ 视频播放器 API 提供了多种自定义功能（ASP.NET, C#）

引言

此嵌入式 YouTube™ API 的扩展版本演示了额外的自定义功能，即

设置启动选项
从播放列表中选择项目
设置自动播放模式
设置播放器的尺寸（宽/高）
更改边框选项
在预定义时间开始播放视频

本项目扩展了我上一篇文章 [1] 中描述的嵌入式 YouTube 视频播放器 API 的功能

启动模式

启动选项可以通过 Web 查询来设置；例如，以下查询设置了自动播放选项和选定的项目索引=2（请参阅此处这里的功能演示样本截图）。此外，还可以通过编程方式设置每个项目的启动时间。请注意样本截图图 1 底部有两个命令按钮；当实际应用程序运行时，点击这些按钮将导致播放从某个预定义位置（分别为 15 秒和 60 秒）开始。

图 1：嵌入式 YouTube™ 播放器，带有以编程方式设置的项目启动时间

注意：所有图片仅用于演示目的。请勿复制/重新分发。

Using the Code

项目包含

默认网页“Default.aspx”及其对应的后台代码：两者都应放在应用程序根目录下
类模块 YouTubeScript.cs，应放在 App_Code 应用程序文件夹中

示例网页包含一个 Literal1 控件，作为 JavaScript 容器，以及一个填充的 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
}

注意：Page_Load 事件过程中插入的 try-catch 块是为了未来的开发。此外，正如注释中所述，int.Parse 可以替换为 int.TryParse()，布尔解析也一样，从而无需特定的 try-catch 块。

类模块

//******************************************************************************
// 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
{
    private const int _defaultW= 320;
    private const int _defaultH = 240;

    #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, _defaultW, _defaultH); }
    #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, _defaultW, _defaultH ); }
    #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), _defaultW, _defaultH ); }
    #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
}
///************************************************************************************

注意：使用 String.Concat() 而不是 Append() 方法可以实现边际性能改进（上述代码片段中为了清晰和教学目的而使用了 Append() 方法）。

浏览器兼容性

此技术已在 4 个主要浏览器上进行测试

Microsoft Internet Explorer 7.0+
Mozilla Firefox
Google Chrome
Apple Safari

WebTV 项目

以上部分描述了一种强大的视频流技术，该技术基于嵌入在 ASP.NET 网页中的 YouTube 播放器。接下来是什么？合乎逻辑的扩展是添加播放列表控件并将其绑定到底层数据库。ASP.NET GridView 控件非常适合此目的：它允许创建带有高级 CSS 样式的模板化字段 [4,5]（另一种选择是实现功能齐全的 MVC，但对于如此相对简单的任务，这似乎有点大材小用）。可能的实现如下面示例截图所示。

后端数据库

后端数据库可以是任何类型。其主表应包含一个强制的 VideoID 字段（唯一键），该字段标识 YouTube 上的视频项（例如，它用作 Web 查询参数：VidID=9bZkp7q19f0 对应于有史以来最受欢迎的音乐视频 PSY 的“江南 Style”）。其他字段是可选的，例如：Title、Performer、Views、Likes、Duration 等，因此通用的视频项表创建模式可能如下面的代码片段所示。

CREATE TABLE VideoItems
(
  ID int NOT NULL PRIMARY KEY,
  VidID varchar(20) NOT NULL UNIQUE,
  Title nvarchar(255) NOT NULL,
   Performer nvarchar(255),
   Duration int,
   Views long,
   Likes long,
   Dislikes long
)

演示

此演示截图演示了上述使用 GridView 控件自定义模板字段的技术。点击下面的图片链接以打开功能齐全的 WebTV 应用程序 [2]

图 2. WebTV 试点项目，由嵌入式 YouTube API for ASP.NET 提供支持，示例截图

左侧的区域包含嵌入式 YouTube 播放器：右侧区域由 GridView 控件组成，该控件链接到应用程序后端数据库，并通过 JavaScript [3] 扩展了功能。其他控件提供了额外的导航便利性（就像典型的视频播放器一样）。实际的 WebTV 项目还实现了一个调度程序，该调度程序允许项目自动推进操作模式。

注意：所有图片仅用于演示目的。请勿复制/重新分发。

为 WebTV 添加功能

链接到 YouTube 视频播放器的后端数据库为进一步的自定义/扩展提供了充足的空间。第一个显而易见的“数据挖掘”扩展是根据受欢迎程度（观看次数 [6]）对项目进行排序。目前有 2 个“Gigamen”（Justin Bieber 和 PSY）的单个视频观看次数超过 10 亿，最近还有一个“GigaLady”（Katy Perry）加入了这个俱乐部。Taylor Swift 很有可能很快也会加入“Giga-club”（敬请关注）。还有一句话：音乐视频类型的这种天文数字般的受欢迎程度令人费解！带着一丝苦涩的讽刺，我文章/技巧的累计观看次数在 300 万的范围内，这让我只能属于入门级的猫咪视频（到目前为止，“Nyan Cat”最受欢迎的视频约有 1.22 亿次观看）。播放列表也可以按音乐类型自定义，例如古典音乐 [7] 等。

关注点

YouTube 播放自定义技术

其他值得关注的方面可能包括视频播放自定义，这与链接的（非嵌入式）YouTube 视频项有关。此自定义技术允许

在特定位置开始播放视频（设置分钟和秒的偏移量）
指定视频重播次数（循环）
以全屏模式开始播放视频
开启/关闭“相关视频”选项
设置自动播放选项
设置播放视频质量

历史

文章发布于 2009 年 9 月 15 日
更新于 2013 年 4 月 14 日，增加了更多自定义选项
更新于 2015 年 7 月 12 日，描述了具有增强控件集的 WebTV