1、利用 Flex 和 PHP 创建网站视频发布系统 收藏 随着宽带的普及、硬盘空间的价格持续降低以及 Adobe Flash Player 和 Flash Video 的实用性，视频分享在互联网上疯狂流行是不足为奇的。像 Google video 和 YouTube 这样的站点是领头羊，而现在已经到处都是小型的视频分享站点了。那么，如何才能加入到潮流中去呢？如何利用像 PHP, Flash 和 Adobe Flex 等技术来创建自己的视频分享网站？行动起来吧，它比你想象的要容易得多。本文将告诉你如何创建网站的 PHP 部分以及如何使用 Flex 框架创建一个视频播放器。要创建一个 YouTube
2、 的简单版本（我们可以称它为 MyTube） ，你需要有一些适当的工具。在服务器端，你需要 PHP 和 MySQL。MySQL 是用来存储有关视频的数据的（比如视频的文件名，缩略图，缩略图的高度和宽度，标题和描述） 。PHP 将完成格式化页面的工作，包括 HTML 和 XML 页面，这取决于你想要怎么做。你还需要一个开源的软件：ffmpeg，它可以将用户上传的任何格式的视频文件转换成 Flash Video 文件（FLV） 。当你向用户展示一个可用的视频列表时，这个 ffmpeg 软件还可以生成视频中某一帧的缩略图。毫无疑问，在视频分享的世界中 ffmpeg 会是你最好的助手。它是一个功能强大
3、、易于使用而且文档齐全的极为优秀的软件。在客户端，有几种不同的用户界面可供选择。第一种就是类似于 YouTube 的 HTML/Flash混合式的用户界面，另外一种就是完全基于 Flash 的用户界面。这里我选择了 Flex 框架来创建一个 Flash 程序，这个程序首先播放视频，然后会列出一个可用视频的列表并提供导航。创建 PHP 后台创建后台的程序之前，你必须先在 MySQL 建立一些数据库模式（schema ） 。首先，创建一个数据库，你可以使用 mysqladmin 命令行：mysqladmin create movies完成之后，将模式加载到数据库，模式文件内容如下：movies.s
4、qlDROP 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，获得一个缩略图并将这些信息添加到数据库中。创建上传页面
5、事实上，创建一个上传视频的 HTML 页很简单，如下：addmovie.htmlTitle Movie 这个页面的表单提交到 upload.php 页，upload.php 会处理视频，抓取缩略图并将数据添加到数据库中。页面代码如下：upload.php$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
6、$out 2 $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$thum
7、bpath“ ); $dsn = mysql:/rootlocalhost/movies; $db = 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( $_FILESmovietmp_name, $_FILESmoviename, $_POSTt
8、itle ); ? File sucessfully uploaded 函数 flv_import()是脚本代码的核心部分，它调用了 converttoflv() 函数和 getthumbnail()函数来将视频转换成 Flash Video 文件和创建缩略图。然后当我打开 addmovie.html 页面的时候，我做了一下截图，见图 1.图 1.上传视频的页面现在你就可以点击 Upload 按钮上传视频到服务器进行处理了。upload.php 页面中的脚本只是一些很基础的代码。如果向将其投入使用，你需要添加一些错误验证代码。这些脚本最大的问题就是处理较大的视频文件的能力。较大的视频文件需要转
9、换很长时间，用户也需要等待很长时间才行。为了能够支持大的视频文件（比如长于 10 秒钟的视频） ，我建议你简单地将视频复制到一个文件夹中，然后通知用户该视频稍后将会出现在网站上。然后你可以编写一段脚本来处理该文件夹中的视频。这里我觉得有必要说明一下为什么要把视频转换成 Flash Video。当然，在 Flash Player 中我需要使用 Flash Video 来观看视频。但是不只是那样，如果我不进行转换的话就要显示每个视频的播放器是什么，而且还要帮助用户找到并安装适用于他们系统的播放器。这将需要大量的工作。将所有的视频转换成 Flash Video 的最大优点同时也是使用 Flex 编写
10、的 Flash Player 的最大优点就是它几乎可以在任何地方运行。下一步就是创建一个类似 YouTube 的简单的 HTML/Flash 界面。创建 HTML/Flash 界面在 Adobe Flex Builder 2 创建一个新的 Flex 工程，然后创建一个 Flash 视频，这个视频通过给定的 URL 找到视频并播放。我们将这个 Flex 应用程序文件命名为simplemovie.mxml，代码如下：simplemovie.mxml这个简单的 Flex 程序包括两部分：一个用来播放视频的 VideoDisplay 组件以及一个 Play 按钮，当视频播放完毕时用户可以点击按钮重新播
11、放。VideoDisplay 组件有一个 source 属性，它包含了视频 FLV 文件的 URL 地址。在这里，它的值是一个程序变量，这个变量是 HTML 中的或标签的 FlashVars 属性所提供的。使用 Flex Builder 将 simplemovie.mxml 编译成 simplemovie.swf 文件然后将其从 bin 文件夹中移动到 PHP 文件目录中。下面我们将创建一个嵌入了这个视频的 PHP 页面，该页面代码如下：simptest.phpgetMessage(); $source = null; $movieId = 1; if ( array_key_exists(
12、movie, $_GET ) ) $movieId = $_GETmovie; $movies = array(); $res = $db-query( SELECT movieId, source, title FROM movies ); while( $row = $res-fetchrow( ) ) $movies = $row; if ( $row0 = $movieId ) $source = $row1; if ( $source = null ) $source = $movies01; ? “ “ type=“application/x-shockwave-flash“ pl
13、uginspage=“http:/ “ 它向数据库中添加了有关视频的一些数据。有关 FLV 和缩略图的功能都使用了 ffmpeg 中的命令行来处理视频。在上面的代码中，一开始是连接到数据库并获取视频列表。然后它就开始查找是否有与URL 中 ID 匹配的视频 ID，如果有匹配的视频 ID，它就会将这个 ID 赋值给 movie 变量并通过 flashVars 参数传送到 simplemovie.swf 文件。接下来，在 HTML 代码中创建了 和 标签用来嵌入 simplemovie.swf，标签中也提供了视频的正确 URL 地址。然后又创建了一个列表列出了所有可用的视频，这个列表中的每一项都提
14、供了它们对应视频的正确 ID 并链接到了本页。在浏览器中运行这个页面的结果如图 2：图 2.简单的视频播放器和视频列表当我打开页面的时候第一个视频开始播放。当我选择右边列表中的某个视频的时候，页面就会重新载入并播放选中的视频。是不是很简单？一个 Flex 文件，一个 PHP 文件再加上后台的一点数据库操作，哇！一个视频分享网站出现了！接下来我们将在 Flex 中做一些工作来增强用户体验。Flex 界面，第一部分如果你想让 Flex 播放视频，你必须向 Flex 程序提供视频列表。最简便的方法就是通过XML。所以，现在我们要返回 PHP 的部分，编写一个可以将数据库中的视频列表抽取到XML 文件
15、的页面。movies.php 就实现了这个功能，代码如下：movies.phpgetMessage(); ? query( SELECT title, source, thumb, width, height FROM movies ); while( $row = $res-fetchrow( ) ) ? “ source=“ thumb=“ width=“ height=“ / 你可以通过命令行运行它然后查看生成的 XML，也可以在浏览器中打开这个页面然后你就可以看到以树形方式显示的 XML，见图 3：图 3.视频的 XML 列表有了这个 XML 列表，我们就可以创建一个扩展自 simpl
16、emovie.mxml 的 Flex 程序，代码如下：mytube1.mxmlimport 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
17、( event : ResultEvent ) : void var firstMovie : String = event.result.movies.movie0.source.toString(); videoPlayer.source = firstMovie; movies = event.result.movies.movie; movieList.selectedIndex = 0; public function onPrevious() : void if ( movieList.selectedIndex = 0 ) movieList.selectedIndex = mo
18、vies.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
19、 = ( 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()“ / 明显的变化就是页面上半部分添加了很多
20、 ActionScript 代码，它们用来管理界面。这些代码首先在 onGetMovies()使用 HTTPService 从 movies.php 中读取 XML。当 HTTPService 类检测到 XML 时会立刻返回一个 XML 文档对象模型（DOM） ，然后我们就可以使用这个DOM 来读取第一个视频并播放它。函数 onGetMovies()还设定了一个 movies 变量来存储列表框中要显示的视频。ActionScript 代码中的其它方法处理界面可能触发的不同事件，例如用户点击了视频列表、点击了“上一个”或“下一个”按钮等等。最下面的代码是一些组成用户界面的 Flex 组件。其中有
21、一些按钮左箭头和右箭头来切换到下一个或上一个视频。在 VideoDisplay 的右边有一个视频列表，在这里该列表只是列出了视频的名字。使用 Flex 编译并运行程序，结果如图 4：图 4.Flex 用户界面的第一个版本现在我们可以使用右边的列表来选择视频，或者通过按下左/右按钮在视频之间切换。这个程序已经相当不错了，不过我们的缩略图在哪里使用了呢？Flex 界面，第二部分添加了缩略图要在列表中使用缩略图，你需要对列表做一下更改使其可以同时显示缩略图及其标题。幸运的是在 Flex 中实现这一点很容易。首先我们要修改 标签为其添加一个itemRenderer，代码如下：mytube2.mxml.
22、 .这个 itemRenderer 是一个由你自己创建的 MXML 组件，而且它的文件名必须是MovieItem。你可以通过选择菜单中的 New MXML Component 来创建文件，然后将下面的代码添加进去：MovieItem.mxml我使用了 Canvas 容器，这样我就可以按照自己的想法定位其中的组件了，当然，你可以使用最适合你的布局的容器。然后，我使用了一个标签用来加载图像并使用了一个标签来显示标题。为了使其看起来有趣一点，我们将图像稍微旋转了一下。最终的效果见图 5。图 5.使用了缩略图的加强版列表框好了，这个外观虽然不是特别好，但是它比单纯的文笔列表酷多了。接下来你可以在这个组
23、件中添加更多想要的东西，比如视频描述、运行时间、链接、评分按钮等等。存储和带宽虽然建立前台程序和数据库操作相对来说很简单，但是这并不是建立一个视频分享网站要面对的唯一问题。目前来说带宽是主要的问题。这些视频，即使格式为编码紧凑的 Flash Video，也是相当大的文件。如何在不耗尽带宽的情况下提供视频服务是值得好好考虑的。当然，解决带宽的一个办法就是买一个更大的连接或者将主机放到宽带情况比较好的数据中心。另外一个选择就是把网站和数据分离，将视频文件存储到其它的地方。Amazon s S3 service 就提供了一种简单的方式，你只要付相当少的费用就可以用一种富余和可升级的方式存储和分享大的文件。在早期使用 S3 来存储网站上的视频文件可以帮你节省一大笔基础设施的费用，而且可以一直使用到网站足够受欢迎可以支付基础设施费用的时候。总结随着 Flash Video 的出现和宽带的广泛普及，现在用很少的费用建立一个视频分享网站不再是天方夜谭了。我希望这个例子可以告诉你使用 Flex/PHP 建立一个视频分享网站是多么容易并激发你的进一步探索。本文来自 CSDN 博客，转载请标明出处：http:/
