使用Flex和PHP打造属于自己的优酷网站

使用Flex和PHP打造属于自己的优酷网站
2010年04月21日
　　英文原文：Creating MyTube with Flex and PHP
　　原文地址：http://www.onlamp.com/pub/a/php/2007/05/24/creating-mytube-with-flex
　　-and-php.html
　　原文作者：Jack Herrington
　　译者：Dreamer。本文（不是我）的翻译已经得到了原文作者的同意，转载请注明出处。
　　本人（这个是我，呵）已经根据此文章的原理，已经实现了基本的功能。包括：
　　上传文件自动格式转换，截图，数据库内容更新，播放等功能，另外还加入了视频管理，
　　专辑管理的功能。你也可以把自己的想法加进去，打造更有个性的视频网站。
　　好了。开始正文
　　随着宽带的普及、硬盘空间的价格持续降低以及Adobe® Flash® Player 和 Flas
　　h Video的实用性，视频分享在互联网上疯狂流行是不足为奇的。像Google video 和 You
　　Tube 这样的站点是领头羊，而现在已经到处都是小型的视频分享站点了。那么，如何才能
　　加入到潮流中去呢？如何利用像PHP, Flash和Adobe Flex™ 等技术来创建自己的视
　　频分享网站？行动起来吧，它比你想象的要容易得多。
　　本文将告诉你如何创建网站的PHP部分以及如何使用Flex框架创建一个视频播放器。要创建
　　一个YouTube的简单版本（我们可以称它为MyTube），你需要有一些适当的工具。
　　在服务器端，你需要PHP 和 MySQL。MySQL是用来存储有关视频的数据的（比如视频的文件
　　名，缩略图，缩略图的高度和宽度，标题和描述）。PHP将完成格式化页面的工作，包括H
　　TML和XML页面，这取决于你想要怎么做。
　　你还需要一个开源的软件：ffmpeg，它可以将用户上传的任何格式的视频文件转换成Flas
　　h Video文件（FLV）。当你向用户展示一个可用的视频列表时，这个 ffmpeg 软件还可以
　　生成视频中某一帧的缩略图。毫无疑问，在视频分享的世界中ffmpeg 会是你最好的助手。
　　它是一个功能强大、易于使用而且文档齐全的极为优秀的软件。
　　在客户端，有几种不同的用户界面可供选择。第一种就是类似于YouTube的HTML/Flash混合
　　式的用户界面，另外一种就是完全基于Flash的用户界面。这里我选择了Flex框架来创建一
　　个Flash程序，这个程序首先播放视频，然后会列出一个可用视频的列表并提供导航。
　　创建PHP后台
　　创建后台的程序之前，你必须先在MySQL建立一些数据库模式（schema）。首先，创建一个
　　数据库，你可以使用mysqladmin命令行：
　　mysqladmin create movies
　　完成之后，将模式加载到数据库，模式文件内容如下：
　　movies.sql
　　DROP TABLE IF EXISTS movies;
　　CREATE TABLE movies (
　　movieId INTEGER NOT NULL AUTO_INCREMENT,
　　title VARCHAR( 255 ),
　　source VARCHAR( 255 ),
　　thumb VARCHAR( 255 ),
　　width INTEGER,
　　height INTEGER,
　　PRIMARY KEY( movieId )
　　);
　　要向数据库中添加数据，你需要开发一个HTML上传页面，它可以上传视频，将视频转换成
　　Flash Video，获得一个缩略图并将这些信息添加到数据库中。
　　创建上传页面
　　事实上，创建一个上传视频的HTML页很简单，如下：
　　addmovie.html
　　
　　
　　
　　
　　
　　Title
　　Movie
　　
　　
　　
　　
　　
　　这个页面的表单提交到 upload.php 页，upload.php 会处理视频，抓取缩略图并将数据添
　　加到数据库中。页面代码如下：
　　upload.php
　　
　　&1";
　　$fh = popen( $cmd, "r" );
　　while( fgets( $fh ) ) { }
　　pclose( $fh );
　　}
　　function getthumbnail( $in, $out )
　　{
　　unlink( $out );
　　$cmd = "ffmpeg -i $in -pix_fmt rgb24 -vframes 1 -s 300x200 $out 2>&1";
　　$fh = popen( $cmd, "r" );
　　while( fgets( $fh ) ) { }
　　pclose( $fh );
　　}
　　function flv_import( $upfile, $fname, $title )
　　{
　　$fname = preg_replace( /\..*$/ ,   , basename( $fname ) );
　　$flvpath = "$fname.flv";
　　$thumbpath = "$fname.gif";
　　converttoflv( $upfile, "movies\\$flvpath" );
　　getthumbnail( $upfile, "movies\\$thumbpath" );
　　$dsn = mysql://root@localhost/movies ;
　　$db =& DB::connect( $dsn );
　　if ( PEAR::isError( $db ) ) { die($db->getMessage()); }
　　$sth = $db->prepare( INSERT INTO movies VALUES ( 0, ?, ?, ?, ?, ? ) );
　　$db->execute( $sth, array( $title, $flvpath, $thumbpath, 300, 200 ) );
　　}
　　flv_import( $_FILES[ movie ][ tmp_name ], $_FILES[ movie ][ name ], $_POST[ ti
　　tle ] );
　　?>
　　File sucessfully uploaded
　　
　　函数flv_import()是脚本代码的核心部分，它调用了converttoflv() 函数和 getthumbna
　　il()函数来将视频转换成Flash Video文件和创建缩略图。然后它向数据库中添加了有关视
　　频的一些数据。有关FLV和缩略图的功能都使用了 ffmpeg 中的命令行来处理视频。
　　现在你就可以点击 Upload 按钮上传视频到服务器进行处理了。
　　upload.php 页面中的脚本只是一些很基础的代码。如果向将其投入使用，你需要添加一些
　　错误验证代码。这些脚本最大的问题就是处理较大的视频文件的能力。较大的视频文件需
　　要转换很长时间，用户也需要等待很长时间才行。
　　为了能够支持大的视频文件（比如长于10秒钟的视频），我建议你简单地将视频复制到一
　　个文件夹中，然后通知用户该视频稍后将会出现在网站上。然后你可以编写一段脚本来处
　　理该文件夹中的视频。
　　这里我觉得有必要说明一下为什么要把视频转换成Flash Video。当然，在Flash Player中
　　我需要使用Flash Video来观看视频。但是不只是那样，如果我不进行转换的话就要显示每
　　个视频的播放器是什么，而且还要帮助用户找到并安装适用于他们系统的播放器。这将需
　　要大量的工作。将所有的视频转换成Flash Video的最大优点――同时也是使用Flex编写的
　　Flash Player的最大优点――就是它几乎可以在任何地方运行。
　　下一步就是创建一个类似YouTube的简单的 HTML/Flash 界面。
　　创建 HTML/Flash 界面
　　在Adobe Flex Builder™ 2创建一个新的Flex 工程，然后创建一个Flash视频，这个
　　视频通过给定的URL找到视频并播放。我们将这个Flex应用程序文件命名为simplemovie.m
　　xml，代码如下：
　　simplemovie.mxml
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　这个简单的Flex程序包括两部分：一个用来播放视频的VideoDisplay组件以及一个Play 按
　　钮，当视频播放完毕时用户可以点击按钮重新播放。
　　VideoDisplay 组件有一个 source 属性，它包含了视频FLV文件的URL地址。在这里，它的
　　值是一个程序变量，这个变量是HTML中的或标签的FlashVars属性所提供
　　的。
　　使用Flex Builder将simplemovie.mxml编译成simplemovie.swf文件然后将其从bin文件夹
　　中移动到PHP文件目录中。下面我们将创建一个嵌入了这个视频的PHP页面，该页面代码如
　　下：
　　simptest.php
　　getMessage()); }
　　$source = null;
　　$movieId = 1;
　　if ( array_key_exists( movie , $_GET ) )
　　$movieId = $_GET[ movie ];
　　$movies = array();
　　$res = $db->query( SELECT movieId, source, title FROM movies );
　　while( $row = $res->fetchrow( ) ) {
　　$movies []= $row;
　　if ( $row[0] == $movieId )
　　$source = $row[1];
　　}
　　if ( $source == null )
　　$source = $movies[0][1];
　　?>
　　
　　
　　
　　
　　
　　
　　
　　">
　　"
　　type="application/x-shockwave-flash"
　　pluginspage="http://www.adobe.com/go/getflashplayer>
　　
　　
　　
　　
　　">
　　
　　
　　
　　
　　在上面的代码中，一开始是连接到数据库并获取视频列表。然后它就开始查找是否有与UR
　　L中ID匹配的视频ID，如果有匹配的视频ID，它就会将这个ID赋值给movie变量并通过flas
　　hVars参数传送到simplemovie.swf文件。
　　接下来，在HTML代码中创建了 和 标签用来嵌入simplemovie.swf，标签
　　中也提供了视频的正确URL地址。然后又创建了一个列表列出了所有可用的视频，这个列表
　　中的每一项都提供了它们对应视频的正确ID并链接到了本页。
　　当我打开页面的时候第一个视频开始播放。当我选择右边列表中的某个视频的时候，页面
　　就会重新载入并播放选中的视频。
　　是不是很简单？一个Flex文件，一个PHP文件再加上后台的一点数据库操作，哇！一个视频
　　分享网站出现了！
　　接下来我们将在Flex中做一些工作来增强用户体验。
　　Flex界面，第一部分
　　如果你想让Flex播放视频，你必须向Flex程序提供视频列表。最简便的方法就是通过XML。
　　所以，现在我们要返回PHP的部分，编写一个可以将数据库中的视频列表抽取到XML文件的
　　页面。movies.php就实现了这个功能，代码如下：
　　movies.php
　　getMessage()); }
　　?>
　　
　　query( SELECT title, source, thumb, width, height FROM movies );
　　while( $row = $res->fetchrow( ) ) {
　　?>
　　" source=""
　　thumb="" width="
　　"
　　height="" />
　　
　　
　　你可以通过命令行运行它然后查看生成的XML，也可以在浏览器中打开这个页面然后你就可
　　以看到以树形方式显示的XML，有了这个XML列表，我们就可以创建一个扩展自simplemovi
　　e.mxml的Flex程序，代码如下：
　　mytube1.mxml
　　
　　
　　
　　
　　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();
　　}
　　
　　
　　
　　
　　
　　
　　
　　>" click="onNext()" />
　　
　　
　　
　　
　　
　　明显的变化就是页面上半部分添加了很多ActionScript代码，它们用来管理界面。这些代
　　码首先在onGetMovies()使用HTTPService从movies.php中读取XML。当HTTPService类检测
　　到XML时会立刻返回一个XML文档对象模型（DOM），然后我们就可以使用这个DOM来读取第
　　一个视频并播放它。函数onGetMovies()还设定了一个movies变量来存储列表框中要显示的
　　视频。ActionScript代码中的其它方法处理界面可能触发的不同事件，例如用户点击了视
　　频列表、点击了“上一个”或“下一个”按钮等等。
　　最下面的代码是一些组成用户界面的Flex组件。其中有一些按钮――左箭头和右箭头――
　　来切换到下一个或上一个视频。在VideoDisplay的右边有一个视频列表，在这里该列表只
　　是列出了视频的名字。
　　现在我们可以使用右边的列表来选择视频，或者通过按下左/右按钮在视频之间切换。这个
　　程序已经相当不错了，不过我们的缩略图在哪里使用了呢？
　　要在列表中使用缩略图，你需要对列表做一下更改使其可以同时显示缩略图及其标题。幸
　　运的是在Flex中实现这一点很容易。首先我们要修改标签为其添加一个itemRender
　　er，代码如下：
　　mytube2.mxml
　　...
　　
　　...
　　这个itemRenderer是一个由你自己创建的MXML组件，而且它的文件名必须是MovieItem。你
　　可以通过选择菜单中的 New > MXML Component 来创建文件，然后将下面的代码添加进去
　　：
　　MovieItem.mxml
　　
　　
　　
　　
　　
　　我使用了Canvas容器，这样我就可以按照自己的想法定位其中的组件了，当然，你可以使
　　用最适合你的布局的容器。然后，我使用了一个标签用来加载图像并使用了一
　　个标签来显示标题。为了使其看起来有趣一点，我们将图像稍微旋转了一下。
　　好了，这个外观虽然不是特别好，但是它比单纯的文笔列表酷多了。接下来你可以在这个
　　组件中添加更多想要的东西，比如视频描述、运行时间、链接、评分按钮等等。
　　存储和带宽
　　虽然建立前台程序和数据库操作相对来说很简单，但是这并不是建立一个视频分享网站要
　　面对的唯一问题。目前来说带宽是主要的问题。这些视频，即使格式为编码紧凑的Flash
　　Video，也是相当大的文件。如何在不耗尽带宽的情况下提供视频服务是值得好好考虑的。
　　当然，解决带宽的一个办法就是买一个更大的连接或者将主机放到宽带情况比较好的数据
　　中心。另外一个选择就是把网站和数据分离，将视频文件存储到其它的地方。Amazon’s
　　S3 service 就提供了一种简单的方式，你只要付相当少的费用就可以用一种富余和可升级
　　的方式存储和分享大的文件。在早期使用 S3 来存储网站上的视频文件可以帮你节省一大
　　笔基础设施的费用，而且可以一直使用到网站足够受欢迎可以支付基础设施费用的时候。
　　总结
　　随着Flash Video的出现和宽带的广泛普及，现在用很少的费用建立一个视频分享网站不再
　　是天方夜谭了。我希望这个例子可以告诉你使用Flex/PHP建立一个视频分享网站是多么容
　　易并激发你的进一步探索。