在上面的代码中，一开始是连接到数据库并获取视频列表。然后它就开始查找是否有与URL中ID匹配的视频ID，如果有匹配的视频ID，它就会将这个ID赋值给movie变量并通过flashVars参数传送到simplemovie.swf文件。

接下来，在HTML代码中创建了<object> 和 <embed>标签用来嵌入simplemovie.swf，标签中也提供了视频的正确URL地址。然后又创建了一个列表列出了所有可用的视频，这个列表中的每一项都提供了它们对应视频的正确ID并链接到了本页。

在浏览器中运行这个页面的结果如图2：

图2.简单的视频播放器和视频列表

当我打开页面的时候第一个视频开始播放。当我选择右边列表中的某个视频的时候，页面就会重新载入并播放选中的视频。

是不是很简单？一个Flex文件，一个PHP文件再加上后台的一点数据库操作，哇！一个视频分享网站出现了！

接下来我们将在Flex中做一些工作来增强用户体验。

Flex界面，第一部分

如果你想让Flex播放视频，你必须向Flex程序提供视频列表。最简便的方法就是通过XML。所以，现在我们要返回PHP的部分，编写一个可以将数据库中的视频列表抽取到XML文件的页面。movies.php就实现了这个功能，代码如下：

movies.php

<?php
require "DB.php";
 
$moviebase = 'http://localhost:8080/movies/';
 
header( 'content-type: text/xml' );
 
$dsn = 'mysql://root@localhost/movies';
$db =& DB::connect( $dsn );
if ( PEAR::isError( $db ) ) { die($db->getMessage()); }
?>
<movies>
<?php
$res = $db->query( 'SELECT title, source, thumb, width, height FROM movies' );
while( $row = $res->fetchrow( ) ) {
?>
  <movie title="<?php echo( $row[0] ) ?>" source="<?php echo( $moviebase.$row[1] ) ?>"
   thumb="<?php echo( $moviebase.$row[2] ) ?>" width="<?php echo( $row[3] ) ?>"
   height="<?php echo( $row[4] ) ?>" />
<?php
}
?>
</movies>

你可以通过命令行运行它然后查看生成的XML，也可以在浏览器中打开这个页面然后你就可以看到以树形方式显示的XML，见图3：

图3.视频的XML列表

有了这个XML列表，我们就可以创建一个扩展自simplemovie.mxml的Flex程序，代码如下：

mytube1.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="movieXmlData.send()">
 
<mx:HTTPService method="get" url="http://localhost:8080/movies.php" id="movieXmlData" result="onGetMovies( event )" />
 
<mx:Script>
import mx.rpc.events.ResultEvent;
import mx.controls.VideoDisplay;
import mx.controls.List;
import mx.rpc.http.HTTPService;
import mx.collections.ArrayCollection;
 
[Bindable]
private var movies : ArrayCollection = new ArrayCollection();
 
public function onGetMovies( event : ResultEvent ) : void
{
  var firstMovie : String = event.result.movies.movie[0].source.toString();
  videoPlayer.source = firstMovie;
 
  movies = event.result.movies.movie;
  movieList.selectedIndex = 0;
}
 
public function onPrevious() : void
{
  if ( movieList.selectedIndex == 0 )
    movieList.selectedIndex = movies.length - 1;
  else
    movieList.selectedIndex -= 1;
  videoPlayer.source = this.movieList.selectedItem.source.toString();
}
 
public function onPlay() : void
{
  videoPlayer.source = this.movieList.selectedItem.source.toString();
  videoPlayer.play();
}
 
public function onNext() : void
{
  if ( movieList.selectedIndex >= ( movies.length - 1 ) )
    movieList.selectedIndex = 0;
  else
    movieList.selectedIndex += 1;
  videoPlayer.source = this.movieList.selectedItem.source.toString();
}
 
public function onChange() : void
{
  videoPlayer.source = this.movieList.selectedItem.source.toString();
}
</mx:Script>
 
<mx:HBox width="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
  <mx:VBox>
    <mx:VideoDisplay width="400" height="300" id="videoPlayer" complete="onNext()" />
    <mx:HBox width="100%" horizontalAlign="center">
       <mx:Button label="<<" click="onPrevious()" />
       <mx:Button label="Play" click="onPlay()" />
       <mx:Button label=">>" click="onNext()" />
    </mx:HBox>
    </mx:VBox>
    <mx:List width="100%" height="340" id="movieList"
      dataProvider="{movies}"
      change="onChange()"
      labelField="title"></mx:List>
</mx:HBox>
</mx:Application>

明显的变化就是页面上半部分添加了很多ActionScript代码，它们用来管理界面。这些代码首先在onGetMovies()使用HTTPService从movies.php中读取XML。当HTTPService类检测到XML时会立刻返回一个XML文档对象模型（DOM），然后我们就可以使用这个DOM来读取第一个视频并播放它。函数onGetMovies()还设定了一个movies变量来存储列表框中要显示的视频。ActionScript代码中的其它方法处理界面可能触发的不同事件，例如用户点击了视频列表、点击了“上一个”或“下一个”按钮等等。

最下面的代码是一些组成用户界面的Flex组件。其中有一些按钮——左箭头和右箭头——来切换到下一个或上一个视频。在VideoDisplay的右边有一个视频列表，在这里该列表只是列出了视频的名字。

使用Flex编译并运行程序，结果如图4：

图4.Flex用户界面的第一个版本

现在我们可以使用右边的列表来选择视频，或者通过按下左/右按钮在视频之间切换。这个程序已经相当不错了，不过我们的缩略图在哪里使用了呢？

Flex 界面，第二部分——添加了缩略图

要在列表中使用缩略图，你需要对列表做一下更改使其可以同时显示缩略图及其标题。幸运的是在Flex中实现这一点很容易。首先我们要修改<List>标签为其添加一个itemRenderer，代码如下：

mytube2.mxml

...
  <mx:List width="100%" height="340" id="movieList"
    dataProvider="{movies}"
    change="onChange()"
    itemRenderer="MovieItem"></mx:List>
...

这个itemRenderer是一个由你自己创建的MXML组件，而且它的文件名必须是MovieItem。你可以通过选择菜单中的 New > MXML Component 来创建文件，然后将下面的代码添加进去：

MovieItem.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="80">
  <mx:Image source="{data.thumb}" width="{data.width/3}"
     height="{data.height/3}" rotation="5" left="10" top="0" />
   <mx:Label text="{data.title}" fontWeight="bold" top="10" left="100" fontSize="18" />
</mx:Canvas>

我使用了Canvas容器，这样我就可以按照自己的想法定位其中的组件了，当然，你可以使用最适合你的布局的容器。然后，我使用了一个<mx:Image>标签用来加载图像并使用了一个<mx:label>标签来显示标题。为了使其看起来有趣一点，我们将图像稍微旋转了一下。最终的效果见图5。

图5.使用了缩略图的加强版列表框

好了，这个外观虽然不是特别好，但是它比单纯的文笔列表酷多了。接下来你可以在这个组件中添加更多想要的东西，比如视频描述、运行时间、链接、评分按钮等等。

存储和带宽

虽然建立前台程序和数据库操作相对来说很简单，但是这并不是建立一个视频分享网站要面对的唯一问题。目前来说带宽是主要的问题。这些视频，即使格式为编码紧凑的Flash Video，也是相当大的文件。如何在不耗尽带宽的情况下提供视频服务是值得好好考虑的。
当然，解决带宽的一个办法就是买一个更大的连接或者将主机放到宽带情况比较好的数据中心。另外一个选择就是把网站和数据分离，将视频文件存储到其它的地方。Amazon’s S3 service 就提供了一种简单的方式，你只要付相当少的费用就可以用一种富余和可升级的方式存储和分享大的文件。在早期使用 S3 来存储网站上的视频文件可以帮你节省一大笔基础设施的费用，而且可以一直使用到网站足够受欢迎可以支付基础设施费用的时候。

总结

随着Flash Video的出现和宽带的广泛普及，现在用很少的费用建立一个视频分享网站不再是天方夜谭了。我希望这个例子可以告诉你使用Flex/PHP建立一个视频分享网站是多么容易并激发你的进一步探索。

上一页  [1] [2]