📄 ajax 和 xml 将 ajax 用于多媒体.htm
字号:
<P><A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#list4">清单
4</A> 显示了经过修改的 search.php 脚本。</P><BR><A name=list4><B>清单 4.
search.php</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<?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>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>脚本一开始建立了一个数组保存全部电影。为了简化起见,这里对电影进行了硬编码。实际应用的时候这些元素很可能取自电影清单的数据库。
</P>
<P>接下来的代码遍历列表,把搜索查询的正则表达式应用于每个电影的标题。如果匹配则输出包含 URL 和名称的
<CODE><movie></CODE> 标签。 </P>
<P>打开页面并输入 <CODE>s</CODE>,将看到 <A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#fig2">图
2</A> 所示的页面。 </P><BR><A name=fig2><B>图 2. 简单的电影查询页面 </B></A><BR><IMG
height=275 alt=简单的电影查询页面
src="Ajax 和 XML 将 Ajax 用于多媒体.files/index2_1_400_299.jpg" width=375>
<BR>
<P>如果按下 Delete 建并输入 <CODE>water</CODE>,就会看到 <A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#fig3">图
3</A> 所示的页面。 </P><BR><A name=fig3><B>图 3. 搜索与 “water” 相关的电影的查询页面
</B></A><BR><IMG height=274 alt="搜索与 “water” 相关的电影的查询页面"
src="Ajax 和 XML 将 Ajax 用于多媒体.files/index2_2_400_297.jpg" width=373>
<BR>
<P>虽然本文主要讨论如何使用 Dynamic HTML(DHTML)和 Ajax 建立前端应用程序,但视频共享网站决不是这么简单。
</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/u_bold.gif" width=16
border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N101D7><SPAN class=atitle>视频分享基础</SPAN></A></P>
<P>先暂时离开实践问题讨论一些更具理论性的东西,视频共享中更加复杂的问题。涉及到三个主要问题: </P>
<UL>
<LI>如何存储和传输视频
<LI>如何处理不同的视频格式
<LI>如何从上传文件中获得缩略图和视频信息 </LI></UL>
<P>视频存储是一个实实在在的问题 —
特别是对于小应用程序而言视频文件非常大,需要大容量的硬盘空间来存储。将其传递给客户还面临着带宽的挑战。可以自己购买设备安装到托管设施中。或者使用
Amazon S3 这样的服务,只需很低的价格就能上传任何资料(数据库备份、图片、电影等等)到 Amazon
数据中心,以及提供给其他客户。和建立数据中心的大量投资相比可以先考虑一下这些服务。 </P>
<P>下一个问题 — 视频格式 —
提出了一个有趣的挑战。存在多种视频格式,没有任何一种播放器能支持所有格式。事实上多数播放器只能处理自己挑选的视频格式。为了方便用户,也许最好以某种格式为标准然后将所有传来的视频都转化成这种格式。有一种非常方便的工具,即命令行应用程序
<I>FFmpeg</I>。它不仅能把一种视频格式转化成另一种,还能拾取画面的快照从而为用户提供视频缩略图。 </P>
<P><A name=flashmedia>选择何种视频格式</A>作为标准可能很麻烦。目前 Flash 视频具有明显的优势,但是
Windows Media®,特别是随着 Microsoft Silverlight(原来的
WPF/Everywhere)的发布,正在赢得越来越多的支持。FFmpeg 几乎能将任何影片格式转化成 Flash
视频格式,这一点很吸引人。而且有一些免费和开源的 Flash
播放器很容易嵌入到网站上。将这些播放器和上述代码结合起来就能建立一个完整的、以 Ajax 为前端的端到端视频分享解决方案。 </P>
<P>但 Web 上不仅仅有视频,图像共享也很重要。 </P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/u_bold.gif" width=16
border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=N10206><SPAN class=atitle>幻灯片放映</SPAN></A></P>
<P><A
href="http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/index.html#list5">清单
5</A> 显示了一个简单的基于 DHTML 的幻灯片,数据来自 XML 文件。 </P><BR><A name=list5><B>清单
5. index.html</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<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[b].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>
</PRE></TD></TR></TBODY></TABLE><BR>
<TABLE cellSpacing=0 cellPadding=0 width=150 align=right border=0>
<TBODY>
<TR>
<TD width=10><IMG height=1 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=10></TD>
<TD>
<TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
<TBODY>
<TR>
<TD bgColor=#eeeeee><A
name=N10223><B>分享这篇文章……</B></A><BR>
<P>
<TABLE cellSpacing=0 cellPadding=0 width=135 border=0>
<TBODY>
<TR>
<TD colSpan=2><IMG height=5 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=1
border=0> </TD></TR>
<TR vAlign=top align=left>
<TD width=21><A
href="http://digg.com/submit?phase=2&url=http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/"><IMG
height=10 alt=digg
src="Ajax 和 XML 将 Ajax 用于多媒体.files/10x10-digg-thumb.gif"
width=10 border=0> </A></TD>
<TD><A
href="http://digg.com/submit?phase=2&url=http://www.ibm.com/developerworks/cn/xml/x-ajaxxml7/">提交到
Digg</A> </TD></TR>
<TR>
<TD colSpan=2><IMG height=5 alt=""
src="Ajax 和 XML 将 Ajax 用于多媒体.files/c.gif" width=1
border=0> </TD></TR>
<TR vAlign=top align=left>
<TD width=21><A
onclick="window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); return false;"
href="http://del.icio.us/post"><IMG height=10
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -