65.9K
CodeProject 正在变化。 阅读更多。
Home

YouTube™ API for ASP.NET

DrABELL
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.97/5 (47投票s)

2009 年 10 月 2 日

CPOL

6分钟阅读

viewsIcon

263611

downloadIcon

11278

YouTube™ API for ASP.NET, AJAX 扩展 (C#)

Link to WebTV app based on YouTube API for ASP.NET

图 1. 示例截图

注意：所有图片仅供演示之用。请勿复制/再分发。

引言

嵌入式视频播放器，无论是基于 Adobe Flash™、Microsoft Silverlight™ 还是纯 HTML5 视频技术，都可以极大地增强网页的美观度和整体用户体验。本文演示了通过一个用 C# 编写的 API 和 Microsoft AJAX 扩展，在 ASP.NET 网页中嵌入非常流行的 YouTube™ 视频播放器（该播放器基于上述的 Adobe Flash™）的编码技术。

项目包含

  • 默认网页 Default.aspx 及其对应的代码隐藏文件：两者都应放置在 Application 根目录下（ASP.NET 2.0+）。
  • 代码模块 YouTubeScriptGenerator.cs，应放置在 App_Code 目录下。
  • AJAX 库文件 (AjaxControlToolkit.dll)，应放置在 Bin 目录下。

背景

嵌入式视频播放器能够流式传输（播放） www.youtube.com 网站上可用的音频/视频内容（注意：使用此功能无需订阅）。视频项 ID 编码在一个查询字符串中，看起来像一串随机字符，例如：x_4CNvG1Q_M，对应的完整地址字符串是：http://www.youtube.com/watch?v=x_4CNvG1Q_M（在本例中，它指向标题为“Anastasia Volochkova dancing to Adiemus by Karl Jenkins”的视频片段）。

嵌入 YouTube™ 视频播放器最简单的方法是访问 www.youtube.com 网站，选择感兴趣的视频，然后将“embed”文本框中的相应代码片段复制/粘贴到您自己的网页中，搞定！YouTube™ 网站提供了几种关于视频播放器尺寸（包括标准设置：340x285、445x364、500x405、660x525）和调色板选择的自定义选项。本文介绍的 ASP.NET YouTube™ API 提供了更广泛的自定义功能。

Using the Code

将 YouTube™ 视频播放器嵌入 ASP.NET 网页的实际步骤如下：

  1. 使用 Microsoft Visual Studio（任何版本）或 Visual Web Developer Express 版本创建或打开一个 ASP.NET 网站。
  2. 下载压缩文件（.zip）。将组件解压到您的 Web 应用程序目录。
  3. 设置嵌入式 YouTube™ 视频播放器的尺寸：宽/高。
  4. 自定义 YouTube™ 视频播放器的边框选项。
  5. 自定义 YouTube™ 视频播放器的启动设置：
    • 要播放的第一个项目
    • 自动播放模式
    • 在预设时间开始视频/音频流。

以下是演示 ASPX 网页及其代码隐藏模块的代码片段：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="default_aspx" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>YouTube ASP.NET Sample</title>
    <meta name="Description" content="YouTube Player API for ASP.NET, Demo" />
    <meta name="Keywords" content="youtube, video, player, asp.net, javascript," />
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Author" content="Alexander Bell" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-control" content="no-cache" />
</head>
<body>
    <form id="form1" runat="server">
        <h3>ASP.NET Embedded Player: Demo</h3>
        <p>Initial settings: 640x480, autoplay=0</p>
        <br />
        <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="UelDrZ1aFeY">The Beatles - Something</asp:ListItem>
                    <asp:ListItem Value="xFrGuyw1V8s">Abba - Dancing Queen</asp:ListItem>
                    <asp:ListItem Value="A_MjCqQoLLA">The Beatles - Hey Jude</asp:ListItem>
                    <asp:ListItem Value="djV11Xbc914">a-ha - Take On Me</asp:ListItem>
                    <asp:ListItem Value="1lyu1KKwC74">The Verve - Bitter Sweet Symphony</asp:ListItem>
                    <asp:ListItem Value="nVhNCTH8pDs">Pink Floyd - Learning To Fly</asp:ListItem>
                </asp:DropDownList>
                <br /><br />
                <asp:Literal ID="Literal1" runat="server"></asp:Literal>
            </div>
            </ContentTemplate>
          </asp:UpdatePanel>
        <h4>NOTE: ALL CONTENT IS SHOWN FOR DEMO PURPOSE ONLY</h4>
    </form>
</body>
</html>

代码隐藏部分

/****************************************************************************
Module           :   Default.aspx.cs
Description      :   YouTube Player for ASP.NET: Demo
Developer        :   Alexander Bell
Date Created     :   09/10/2009
****************************************************************************
DISCLAIMER: This Application is provide on AS IS basis without any warranty
****************************************************************************
TERMS OF USE     :   ALL YouTube CONTENT IS SHOWN AS DEMO SAMPLE ONLY
                 :   You can use it at your sole risk
/****************************************************************************/
using System;
using System.Text;
public partial class default_aspx : System.Web.UI.Page
    {
        // player width
        private int _W = 640;

        // player height
        private int _H = 480;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                #region Start mode customization via Web Query String
                const string AUTO = "auto";
                const string IDX = "idx";
                int idx = 0;
                int auto = 0;

                try {
                    // autoplay param
                    string _auto = Request.QueryString[AUTO] ?? String.Empty ;
                    if (_auto != String.Empty) auto = int.Parse(_auto);


                    // item index
                    string _idx= Request.QueryString[IDX] ?? String.Empty;
                    if (_idx != String.Empty) idx = int.Parse(_idx); 

                }
                catch { }
                #endregion

                // get value from the list for selected index
                cmbPlaylist.SelectedIndex = idx;

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

    #region YouTube script to set: item, autoplay option, screen W/H
    /// <summary>
    /// YouTube player script generator (w/autoplay, W/H options)
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">int</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <returns>string</returns>
    private string Get(string id, int auto, int W, int H)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append(@"<embed src='http://www.youtube.com/v/");
        // select the item to play
        sb.Append(id);
        sb.Append("&autoplay=");
        // set autoplay options (indicates number of plays)
        sb.Append(auto.ToString());
        sb.Append("' ");
        sb.Append("type='application/x-shockwave-flash' ");
        sb.Append("allowscriptaccess='never' enableJavascript ='false' ");
        sb.Append("allowfullscreen='true' ");
        // set width
        sb.Append("width='" + W.ToString() + "' ");
        // set height
        sb.Append("height='" + H.ToString() + "' ");
        sb.Append(@"></embed>");
        string scr = sb.ToString();
        return scr;
    }
    #endregion
}

WebTV 项目

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

后端数据库

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

表 1. 视频项主表
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
)

为 WebTV 添加功能

与 YouTube 视频播放器关联的后端数据库为进一步的自定义/扩展提供了充足的空间。第一个显而易见的“数据挖掘”扩展是按受欢迎程度对项目进行排序。目前（截至 2015 年），有两位 YouTube“巨星”（Justin Bieber 和 PSY）的单视频观看次数超过 10 亿，还有一位“巨星”（Katy Perry）已加入上述 YouTube 巨星俱乐部。音乐视频流派如此惊人的受欢迎程度确实令人难以置信！讽刺的是，我 400 多万的 CodeProject 文章/技巧累计观看次数仅将我归类为入门级的猫咪视频（到目前为止，最受欢迎的“Nyan Cat”视频约有 1.22 亿次观看）。

播放列表还可以按音乐类型自定义，例如古典音乐等，从而在主题伞下创建视频频道，如下一子章节所述。

添加频道

此视频流技术的可能进一步扩展是，除了上述 VideoItems 主表外，再向后端数据库添加两个表来创建频道：

表 2. 视频频道
CREATE TABLE VideoChannels
(
  CID int NOT NULL PRIMARY KEY,
  Channel varchar(50) NOT NULL UNIQUE,
  Description nvarchar(255)
)
表 3. 视频频道-项目连接表
CREATE TABLE ChannelItems
(
  CVID int NOT NULL PRIMARY KEY,
  VidID varchar(20) NOT NULL,
  CID int NOT NULL,
  Position int NOT NULL,
  Comments nvarchar(255),
)

其中 VidID 和 CID 是将表与主 VideoItems 和 Channels 表相关联的外键。此外，可以在复合（VidID、CID）索引上添加 Unique 约束，以避免同一频道中出现重复的视频项。Position 字段指定项目在播放列表（频道）中的显示位置，因此相应的 SQL Select 语句必须包含 ORDER BY [Position] 子句。

如上所述，频道的内容可以根据时间（每日、每周、每月等）动态更新。

演示

此演示截图使用 GridView 控件的自定义模板字段展示了上述技术。

 
“Top-100 Summertime Music Videos”在线频道，示例截图

 

 
WebTV 应用带每日调度器，示例截图

注意：所有图片仅供演示之用。请勿复制/再分发。

在上图所示的截图图像中，左侧部分包含嵌入式 YouTube 播放器：右侧部分由链接到应用程序后端数据库的 GridView 控件组成，功能通过 JavaScript 扩展。其他控件提供额外的导航便利（如同典型视频播放器）。

关注点

通过使用 Microsoft AJAX 扩展实现了视频项之间的平滑过渡：请注意包含相应 JavaScript 的 Literal1 控件所在的 UpdatePanel。

YouTube 视频播放自定义

其他有趣的点可能包括与链接（非嵌入式）YouTube 视频项相关的视频播放自定义。此自定义技术允许：

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

历史

  • 2014 年 8 月 1 日：更新了更多自定义选项和 YouTube 统计信息。
  • 2013 年 4 月 30 日：是时候切换到 jQuery 2.0 了（已完成）。
  • 2013 年 4 月 30 日：使此播放器兼容 HTML5（主要更改：<iframe class='youtube-player' type='text/html' frameborder='0' id="player"></iframe> 以及基于此的 jQuery 部分）。
  • 2015 年 7 月 20 日：添加了 WebTV 频道概念和实现的技​​术讨论。

参考文献

  1. YouTube™嵌入式视频播放器：扩展API（C#）
  2. 在 ASP.NET GridView 或 HTML 表中单击/选择行。
  3. ASP.NET 中的嵌套 GridView 控件：最佳实践
  4. ASP.NET GridView 中的超链接图像
  5. Bottle.IsNullOrEmpty()，交流讨论。
© . All rights reserved.