目录
图1.示例屏幕截图
注意：所有图像仅用于演示目的。请不要复制/重新分发。
介绍
基于Adobe Flash，Microsoft™ Silverlight™或纯HTML5视频技术的嵌入式视频播放器可以显着增强网页美感和整体用户体验。本文演示了通过用C#编写的API和Microsoft AJAX扩展将相当流行的YouTube™视频播放器（基于上述Adobe Flash™构建）嵌入ASP.NET网页中的编码技术。
该项目包含：
- 默认网页Default.aspx相应的代码隐藏：两者都将放置在应用程序根目录（ASP.NET 2.0+）中。
- 代码模块YouTubeScriptGenerator.cs放在App_Code目录中。
- 要放在Bin目录中的AJAX库文件（AjaxControlToolkit.dll）
背景
嵌入式视频播放器能够流式传输（播放）音频/视频内容，可从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 网站，选择感兴趣的项目，然后将标有“嵌入”的文本框中的相应片段复制/粘贴到您自己的网页中，瞧！YouTube™网站提供了多个有关视频播放器大小的自定义选项（包括指定为：340x285、445x364、500x405、660x525）和调色板选择的自定义选项。本文介绍的ASP.NET YouTube™ API提供了更广泛的自定义功能集。
使用代码
将YouTube™视频播放器嵌入ASP.NET网页的实际步骤如下：
- 使用Visual Studio（任何版本）或Visual Web Developer速成版创建或打开Microsoft ASP.NET网站。
- 下载压缩的（.zip）文件。将组件解压缩到Web应用程序目录中。
- 设置嵌入式YouTube™视频播放器尺寸：W/H。
- 自定义YouTube™视频播放器边框选项。
- 自定义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项目
该部分介绍了基于嵌入在网页ASP.NET YouTube播放器的强大视频流技术。下一步是什么？逻辑扩展将添加播放列表控件并将其绑定到基础数据库。ASP.NET GridView控件可以完全符合目的：它允许使用高级CSS样式创建模板化字段[4,5]（另一个选项是实现成熟的MVC，但对于这种相对简单的任务来说，这似乎是矫枉过正）。下面的示例屏幕截图显示了可能的实现。
后端数据库
后端数据库可以是任何类型。它的主表应该包含一个必填VideoID字段（唯一键），用于标识YouTube上的视频项目（它用作网络查询参数，例如：VidID=9bZkp7q19f0对应于PSY有史以来最受欢迎的音乐视频“Gangnam 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 年）确定了2个YouTube“GigaMen”（贾斯汀·比伯和PSY），每个视频项目都有1+十亿次观看，并且一个“GigaLady”（Katy Perry）已添加到上述YouTube Giga-club。音乐视频类型的这种天文数字的受欢迎程度确实令人难以置信！具有讽刺意味的是，我的4+百万CodeProject文章/技巧累积浏览量使我属于入门级猫咪视频的类别（到目前为止，最受欢迎的“Nyan Cat”视频约占122次观看）。
播放列表也可以按音乐类型（例如古典音乐等）进行自定义，从而在主题保护伞下创建视频频道，如下一章所述。
添加频道
这种视频流技术的进一步扩展可能是通过在后端数据库中添加另外两个表来创建通道，除了上述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扩展实现的：注意UpdatePanel，其中包含包含相应JavaScript的Literal1控件。
YouTube视频播放自定义
其他兴趣点可能包括与链接（非嵌入）YouTube视频项相关的视频播放自定义。这种自定义技术允许：
- 在特定位置开始视频播放（以分钟和秒为单位设置偏移量）
- 指定视频重播次数（循环播放）
- 在全屏模式下开始视频播放
- 打开/关闭“相关视频”选项
- 设置自动播放选项
- 设置播放视频质量
https://www.codeproject.com/Articles/42324/YouTube-API-for-ASP-NET
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
