您的位置：首页 > 其它

Ajax 和 XML: 将 Ajax 用于多媒体

2008-10-25 00:44 162 查看

2007 年 11 月 12 日宽带、媒体、电影、图像和声音等技术的出现推动了 Web 2.0 的发展。了解如何把多媒体与 PHP 和 Asynchronous JavaScript™ + XML（Ajax）结合起来创造令人耳目一新的体验。如果问哪一个网站最能代表 Web 应用程序的新潮流，多数人会回答 YouTube。这个网站不仅仅积极接纳新技术营造出梦幻效果，而且改变了我们对多媒体的看法，改变了我们和媒体的关系。许多故事在以传统媒体渠道传播之前就已经出现在 YouTube 上了，当它们不再流传时，YouTube 就会像全世界的一个巨大的 Tivo，记录着曾经发生的点点滴滴。

请访问 Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。


		订阅 Ajax 相关文章和教程的 RSS 提要

媒体分享正在改变世界，而且从技术的观点来说，这并不难做到。本文介绍如何在 Web 视频托管应用程序上增加一个 Ajax 前端。简单的视频选择首先来看网站，网站上有一个电影列表可供选择 — 一个不用改变页面就能选择不同电影的网站。页面代码如清单 1 所示。
清单 1. index.html

<html>
<head>
<script src="prototype.js"></script>
</head>
<body>

<div id="movieHost">
</div>

<div id="movieList">
</div>

<script>
function setMovie( url )
{
 $('movieHost').innerHTML = '';
 var elEmbed = document.createElement( 'embed' );
 elEmbed.src = url;
 $('movieHost').appendChild( elEmbed );
}

new Ajax.Request( 'movies.xml', { 
 method: 'get',
 onSuccess: function( transport ) {
 var movieTags = transport.responseXML.getElementsByTagName( 'movie' );

 $('movieList').innerHTML = '';

 var bFirst = true;
 for( var b = 0; b < movieTags.length; b++ ) {
 var url = movieTags.getAttribute('url');
 var title = movieTags[b].getAttribute('title');
 if ( bFirst )
 {
 setMovie( url );
 bFirst = false;
 }
 var html = '<a href="javascript:void setMovie(/''+url+'/');">';
 html += title+'</a><br/>';
 $('movieList').innerHTML += html;
 }
 }
} );
</script>
</body>
</html>

该页面使用 Prototype.js 这个很棒的 JavaScript 库向 movies.xml 数据源发送 Ajax 请求。返回数据后通过

getElementsByTagName()

方法查找所有电影标签。对每个电影标签，代码检索 URL 和标题。如果检索的标签是列表中的第一部电影，脚本立即开始放映这部电影。否则添加一个 anchor 标签作为

movieList <div>

的电影选择器。电影选择器 anchor 调用

setMovie()

函数打开指定的电影。播放电影的方法很简单，首先将

movieHost <div>

标签置空，即删除原来的电影。然后将内容设置为

<embed>

标签，其 URL 由电影列表指定。

<embed>

标签是在页面中播放电影最简单的方法，但是存在跨浏览器的问题。另一种办法是同时使用

<object>

和

<embed>

标签（还有一种办法，即使用 Macromedia Flash Player：本文稍后再讨论）。这个简单的例子中，movies.xml 只是一个平面文件，包含一些我自己的家庭短片的引用。该文件如清单 2 所示。
[b]清单 2. movies.xml

<movies>
 <movie url="spider.mov" title="Spider" />
 <movie url="swing.mov" title="Swing Set" />
 <movie url="water.mov" title="Water Splash" />
</movies>

打开该页面时，显示的结果如图 1 所示。
图 1. 简单的电影列表页面

最上方是一部由

<embed>

标签播放的电影，下面是其他影片列表。点击其中的任何链接，正在播放的电影就变成所选择的电影。显然，这个系统不适合大型的视频资料库，还需要对影片列表进行某种搜索。

回页首

可搜索的电影列表要添加搜索功能，必须添加一个搜索框，如清单 3 所示。其中增加了搜索输入字段

。
清单 3. 添加搜索功能

<html>
<head>
<script src="prototype.js"></script>
</head>
<body>

<table><tr><td valign="top">
 <input type="text" id="q" onkeyup="search()">
 <div id="movieList">
 </div>
</td><td valign="top">
 <div id="movieHost">
 </div>
</td>
</tr></table>

<script>
function setMovie( url )
{
 $('movieHost').innerHTML = '';
 var elEmbed = document.createElement( 'embed' );
 elEmbed.src = url;
 $('movieHost').appendChild( elEmbed );
}

function search()
{
 new Ajax.Request( 'search.php?q='+escape($('q').value), { 
 method: 'get',
 onSuccess: function( transport ) {
 var movieTags = transport.responseXML.getElementsByTagName( 'movie' );

 $('movieList').innerHTML = '';

 var bFirst = true;
 for( var b = 0; b < movieTags.length; b++ ) {
 var url = movieTags.getAttribute('url');
 var title = movieTags[b].getAttribute('title');
 if ( bFirst )
 {
 setMovie( url );
 bFirst = false;
 }
 var html = '<a href="javascript:void setMovie(/''+url+'/');">';
 html += title+'</a><br/>';
 $('movieList').innerHTML += html;
 }
 }
 } );
}
</script>
</body>
</html>

在 key-up 事件中指定

search()

方法将被调用。

search()

方法和

Ajax.Request

调用类似，除了向 search.php 页面传递查询字符串。search.php 脚本返回和原来相同的 XML 格式，因此不需要修改 XML 解析的代码。我承认对于自己的习惯来说，key-up 上的

search()

函数反映有点太快。理想情况下，系统应该在执行搜索之前等待一秒左右以便输入完整的搜索文本，避免列表不停地闪烁。使用

window.setTimeout()

方法很容易实现这种行为。清单 4 显示了经过修改的 search.php 脚本。
[b]清单 4. search.php

<?php
header( 'content-type: text/xml' );

$movies = array();
$movies['spider.mov'] = 'Spider';
$movies['swing.mov'] = 'Swing Set';
$movies['water.mov'] = 'Water Splash';
?>
<movies>
<?php
foreach( $movies as $k => $v ) {
if ( strlen( $_GET['q'] ) > 0 &&
 preg_match( '/'.$_GET['q'].'/i', $v ) ) {
?>
<movie url="<?php echo($k) ?>" title="<?php echo($v) ?>" />
<?php
} }
?>
</movies>

脚本一开始建立了一个数组保存全部电影。为了简化起见，这里对电影进行了硬编码。实际应用的时候这些元素很可能取自电影清单的数据库。接下来的代码遍历列表，把搜索查询的正则表达式应用于每个电影的标题。如果匹配则输出包含 URL 和名称的

<movie>

标签。打开页面并输入

，将看到图 2 所示的页面。
图 2. 简单的电影查询页面

如果按下 Delete 建并输入

water

，就会看到图 3 所示的页面。
图 3. 搜索与 “water” 相关的电影的查询页面

虽然本文主要讨论如何使用 Dynamic HTML（DHTML）和 Ajax 建立前端应用程序，但视频共享网站决不是这么简单。

回页首

视频分享基础先暂时离开实践问题讨论一些更具理论性的东西，视频共享中更加复杂的问题。涉及到三个主要问题：如何存储和传输视频
如何处理不同的视频格式
如何从上传文件中获得缩略图和视频信息
视频存储是一个实实在在的问题 — 特别是对于小应用程序而言视频文件非常大，需要大容量的硬盘空间来存储。将其传递给客户还面临着带宽的挑战。可以自己购买设备安装到托管设施中。或者使用 Amazon S3 这样的服务，只需很低的价格就能上传任何资料（数据库备份、图片、电影等等）到 Amazon 数据中心，以及提供给其他客户。和建立数据中心的大量投资相比可以先考虑一下这些服务。下一个问题 — 视频格式 — 提出了一个有趣的挑战。存在多种视频格式，没有任何一种播放器能支持所有格式。事实上多数播放器只能处理自己挑选的视频格式。为了方便用户，也许最好以某种格式为标准然后将所有传来的视频都转化成这种格式。有一种非常方便的工具，即命令行应用程序 FFmpeg。它不仅能把一种视频格式转化成另一种，还能拾取画面的快照从而为用户提供视频缩略图。选择何种视频格式作为标准可能很麻烦。目前 Flash 视频具有明显的优势，但是 Windows Media®，特别是随着 Microsoft Silverlight（原来的 WPF/Everywhere）的发布，正在赢得越来越多的支持。FFmpeg 几乎能将任何影片格式转化成 Flash 视频格式，这一点很吸引人。而且有一些免费和开源的 Flash 播放器很容易嵌入到网站上。将这些播放器和上述代码结合起来就能建立一个完整的、以 Ajax 为前端的端到端视频分享解决方案。但 Web 上不仅仅有视频，图像共享也很重要。

回页首

幻灯片放映清单 5 显示了一个简单的基于 DHTML 的幻灯片，数据来自 XML 文件。
清单 5. index.html

<html>
<head>
<script src="prototype.js"></script>
</head>
<body bgcolor="black">
<div style="text-align:center;">
<img id="imgItem" src="" style="display:none;"><br>
<div id="imgTitle" style="color:white;font-family:arial;font-size:24pt;">
</div>
</div>
<script>
var g_images = [];
var g_slideIndex = 0;

function showSlide()
{
 $('imgTitle').hide();
 $('imgItem').hide();

 var height = 600;
 var width = ( height / g_images[ g_slideIndex ].height ) * 
 g_images[ g_slideIndex ].width;

 $('imgItem').src = g_images[ g_slideIndex ].src;
 $('imgItem').width = width;
 $('imgItem').height = height;

 $('imgTitle').innerHTML = g_images[ g_slideIndex ].title;

 $('imgTitle').show();
 $('imgItem').show();

 g_slideIndex++;
 if ( g_slideIndex >= g_images.length )
 g_slideIndex = 0;
}

new Ajax.Request( 'images.xml', { 
 method: 'get',
 onSuccess: function( transport ) {
 var imageTags = transport.responseXML.getElementsByTagName( 'image' );

 for( var b = 0; b < imageTags.length; b++ ) {
 g_images.push( {
 src: imageTags.getAttribute('src'),
 title: imageTags[b].getAttribute('title'),
 width: imageTags[b].getAttribute('width'),
 height: imageTags[b].getAttribute('height')
 } );
 }

 showSlide();

 window.setInterval( showSlide, 5000 );
 }
} );
</script>
</body>
</html>

上述代码需要用到 Prototype.js JavaScript 库。利用

Ajax.Request

对象获得要显示的图片列表。然后解析返回的 XML 代码，获得图片的 URL、宽、高和标题。然后调用

showSlide()

函数得到幻灯片显示效果。设置的计时器每五秒切换到下一张幻灯片。幻灯片放映通过包含当前图片的

<image>

标签和标题

<div>

标签实现。所谓放映只不过是隐藏当前的图片和标题，将图片来源和标题文本设置为新幻灯片的内容并显示。如果需要某种淡入淡出效果，建议使用 Scriptaculous 库中的

Effects

类，它是构建在 Prototype.js 上的。清单 6 显示了数据图像文件。
[b]清单 6. images.xml

<images>
 <image src="images/megan1_875_700.jpg" title="Megan" width="875" height="700" />
 <image src="images/oso1_875_700.jpg" title="Oso 1" width="875" height="700" />
 <image src="images/oso2_873_700.jpg" title="Oso 2" width="873" height="700" />
</images>

这里虽然使用了硬编码，但使用 PHP 脚本很容易生成 XML 代码。幻灯片放映如图 4 所示。
图 4. 简单的幻灯片放映

注意：我以前介绍过一个更加精细的幻灯片放映版本（要获得相关链接，参见参考资料）。现在这个版本的区别在于使用了 Prototype.js 库，各幻灯片之间的切换更简单。

回页首

结束语像 Flikr 和 YouTube 之类的网站仅仅显示了 Web 上的多媒体应用的巨大潜能的冰山一角。本文介绍了一些非常简便的视频和图片浏览的实现，可用于您自己的项目。如果有效，请参加 developerWorks Ajax 论坛（参见参考资料）告诉我您取得的成功。

回页首

下载

描述	名字	大小	下载方法
Sample code	x-ajaxxml7-media.zip	1090KB	HTTP


	关于下载方法的信息

参考资料学习
您可以参阅本文在 developerWorks 全球网站上的英文原文。

Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。

订阅 Ajax 相关文章和教程的 RSS 提要：获得即将发表的 Ajax 相关文章和教程的通知（查看 developerWorks 内容 RSS 提要了解更多的信息）。

PHP 主页：访问这个有关 PHP 程序员的宝贵资源。

Prototype 库：这个 JavaScript Framework 可简化动态 Web 应用程序的开发。

Scriptaculous JavaScript 库：这个基于 Prototype 的框架提供了显示帮助程序和效果。

Prototype.js 文档页面：获得关于 Prototype JavaScript 库的其他信息，包括官方 Prototype blog 和其他参考资料的链接。

jQuery：这种 JavaScript 库提供了跟 Prototype.js 类似的功能。

Yahoo! User Interface Library：查阅 Yahoo! 的 Ajax 工具箱。

使用 DHTML 与 XML *** Ajax 幻灯片（Jack Herrington，developerWorks，2007 年 3 月）：一种构建在 Ajax 上的更精致的幻灯片放映程序。

FFmpeg：这种视频工具可以转换视频格式和抓取单独的画面并存为 JPG 文件。

IBM XML 认证：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。

XML 技术文档库：developerWorks XML 专区提供了大量技术文章和技巧、教程、标准以及 IBM 红皮书。

developerWorks 技术活动和网络广播：随时关注技术的最新进展。

developerWorks 中国网站 XML 专区：通过 developerWorks XML 专区了解 XML。

讨论
参与论坛讨论。

XML 专区讨论论坛：参与几个以 XML 为中心的论坛。

developerWorks XML 专区：分享您的想法：阅读本文后在这个论坛上发布您的评论和想法。XML 专区编辑负责该论坛，欢迎您的参加。

关于作者


		Jack D. Herrington 是一位有着超过 20 年经验的高级软件工程师。他是 Code Generation in Action、Podcasting Hacks 和 PHP Hacks 这三本书的作者。他还发表了 30 多篇文章。可以通过 jherr@pobox.com 与 Jack 联系。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航