用户名：
密码：
  　 自动登录 　忘记密码　　

您的位置：超越EBIBI 　 技术经验分享 　 使用Flex和PHP创建自己的视频应用

泡泡熊
Flash/Flex构架师 / 广东
积分 76

使用Flex和PHP创建自己的视频应用


2010-07-13 点击:次


     随着宽带的普及、硬盘空间的价格持续降低以及Adobe® Flash® Player 和 Flash Video的实用性，视频分享在互联网上疯狂流行是不足为奇的。像Google video 和 YouTube 这样的站点是领头羊，而现在已经到处都是小型的视频分享站点了。那么，如何才能加入到潮流中去呢？如何利用像PHP, Flash和Adobe Flex™ 等技术来创建自己的视频分享网站？行动起来吧，它比你想象的要容易得多。

本文将告诉你如何创建网站的PHP部分以及如何使用Flex框架创建一个视频播放器。要创建一个YouTube的简单版本（我们可以称它为MyTube），你需要有一些适当的工具。

在服务器端，你需要PHP 和 MySQL。MySQL是用来存储有关视频的数据的（比如视频的文件名，缩略图，缩略图的高度和宽度，标题和描述）。PHP将完成格式化页面的工作，包括HTML和XML页面，这取决于你想要怎么做。

你还需要一个开源的软件：ffmpeg，它可以将用户上传的任何格式的视频文件转换成Flash Video文件（FLV）。当你向用户展示一个可用的视频列表时，这个 ffmpeg 软件还可以生成视频中某一帧的缩略图。毫无疑问，在视频分享的世界中ffmpeg 会是你最好的助手。它是一个功能强大、易于使用而且文档齐全的极为优秀的软件。

在客户端，有几种不同的用户界面可供选择。第一种就是类似于YouTube的HTML/Flash混合式的用户界面，另外一种就是完全基于Flash的用户界面。这里我选择了Flex框架来创建一个Flash程序，这个程序首先播放视频，然后会列出一个可用视频的列表并提供导航。

创建PHP后台

创建后台的程序之前，你必须先在MySQL建立一些数据库模式（schema）。首先，创建一个数据库，你可以使用mysqladmin命令行：

mysqladmin create movies

完成之后，将模式加载到数据库，模式文件内容如下：

  1. movies.sql  
  2.  
  3. DROP TABLE IF EXISTS movies;   
  4. CREATE TABLE movies (   
  5. movieId INTEGER NOT NULL AUTO_INCREMENT,   
  6. title VARCHAR( 255 ),   
  7. source VARCHAR( 255 ),   
  8. thumb VARCHAR( 255 ),   
  9. width INTEGER,   
  10. height INTEGER,   
  11. PRIMARY KEY( movieId )   
  12. );  
  13.  

要向数据库中添加数据，你需要开发一个HTML上传页面，它可以上传视频，将视频转换成Flash Video，获得一个缩略图并将这些信息添加到数据库中。

事实上，创建一个上传视频的HTML页很简单，如下：

  1. addmovie.html  
  2.  
  3. <html>   
  4. <body>   
  5. <form enctype="multipart/form-data" method="post" action="upload.php">   
  6. <input type="hidden" name="MAX_FILE_SIZE" value="300000" />   
  7. <table>   
  8. <tr><td>Title</td><td><input type="text" name="title"></td></tr>   
  9. <tr><td>Movie</td><td><input type="file" name="movie"></td></tr>   
  10. </table>   
  11. <input type="submit" value="Upload" />   
  12. </form>   
  13. </body>   
  14. </html> 
  15.  

这个页面的表单提交到 upload.php 页，upload.php 会处理视频，抓取缩略图并将数据添加到数据库中。页面代码如下：

  1. upload.php  
  2.  
  3. <html><body>   
  4. <?php   
  5. require "DB.php";   
  6.     
  7. function converttoflv( $in, $out )   
  8. {   
  9.   unlink( $out );   
  10.   $cmd = "ffmpeg -v 0 -i $in -ar 11025 $out 2>&1";   
  11.   $fh = popen( $cmd, "r" );   
  12.   while( fgets( $fh ) ) { }   
  13.   pclose( $fh );   
  14. }   
  15.     
  16. function getthumbnail( $in, $out )   
  17. {   
  18.   unlink( $out );   
  19.   $cmd = "ffmpeg -i $in -pix_fmt rgb24 -vframes 1 -s 300x200 $out 2>&1";   
  20.   $fh = popen( $cmd, "r" );   
  21.   while( fgets( $fh ) ) { }   
  22.   pclose( $fh );   
  23. }   
  24.     
  25. function flv_import( $upfile, $fname, $title )   
  26. {   
  27.   $fname = preg_replace( '/\..*$/', '', basename( $fname ) );   
  28.   $flvpath = "$fname.flv";   
  29.   $thumbpath = "$fname.gif";   
  30.     
  31.   converttoflv( $upfile, "movies\\$flvpath" );   
  32.   getthumbnail( $upfile, "movies\\$thumbpath" );   
  33.     
  34.   $dsn = 'mysql://root@localhost/movies';   
  35.   $db =& DB::connect( $dsn );   
  36.   if ( PEAR::isError( $db ) ) { die($db->getMessage()); }   
  37.     
  38.   $sth = $db->prepare( 'INSERT INTO movies VALUES ( 0, ?, ?, ?, ?, ? )' );   
  39.   $db->execute( $sth, array( $title, $flvpath, $thumbpath, 300, 200 ) );   
  40. }   
  41.     
  42. flv_import( $_FILES['movie']['tmp_name'], $_FILES['movie']['name'], $_POST['title'] );   
  43. ?>   
  44. File sucessfully uploaded   
  45. </body></html> 
  46.  

函数flv_import()是脚本代码的核心部分，它调用了converttoflv() 函数和 getthumbnail()函数来将视频转换成Flash Video文件和创建缩略图。然后它向数据库中添加了有关视频的一些数据。有关FLV和缩略图的功能都使用了 ffmpeg 中的命令行来处理视频。

当我打开addmovie.html 页面的时候，我做了一下截图，见图1.


图1.上传视频的页面

现在你就可以点击 Upload 按钮上传视频到服务器进行处理了。

upload.php 页面中的脚本只是一些很基础的代码。如果向将其投入使用，你需要添加一些错误验证代码。这些脚本最大的问题就是处理较大的视频文件的能力。较大的视频文件需要转换很长时间，用户也需要等待很长时间才行。

为了能够支持大的视频文件（比如长于10秒钟的视频），我建议你简单地将视频复制到一个文件夹中，然后通知用户该视频稍后将会出现在网站上。然后你可以编写一段脚本来处理该文件夹中的视频。

这里我觉得有必要说明一下为什么要把视频转换成Flash Video。当然，在Flash Player中我需要使用Flash Video来观看视频。但是不只是那样，如果我不进行转换的话就要显示每个视频的播放器是什么，而且还要帮助用户找到并安装适用于他们系统的播放器。这将需要大量的工作。将所有的视频转换成Flash Video的最大优点——同时也是使用Flex编写的Flash Player的最大优点——就是它几乎可以在任何地方运行。

下一步就是创建一个类似YouTube的简单的 HTML/Flash 界面。

在Adobe Flex Builder™ 2创建一个新的Flex 工程，然后创建一个Flash视频，这个视频通过给定的URL找到视频并播放。我们将这个Flex应用程序文件命名为simplemovie.mxml，代码如下：

simplemovie.mxml

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">   
  3. <mx:VBox backgroundColor="white" width="400" height="335">   
  4.   <mx:VideoDisplay width="400" height="300" id="videoPlayer"   
  5.     source="{Application.application.parameters.movie}" />   
  6.   <mx:HBox width="100%" horizontalAlign="center">   
  7.     <mx:Button label="Play" click="videoPlayer.play()" />   
  8.   </mx:HBox>   
  9. </mx:VBox>   
  10. </mx:Application> 

这个简单的Flex程序包括两部分：一个用来播放视频的VideoDisplay组件以及一个Play 按钮，当视频播放完毕时用户可以点击按钮重新播放。
VideoDisplay 组件有一个 source 属性，它包含了视频FLV文件的URL地址。在这里，它的值是一个程序变量，这个变量是HTML中的<object>或<embed>标签的FlashVars属性所提供的。

使用Flex Builder将simplemovie.mxml编译成simplemovie.swf文件然后将其从bin文件夹中移动到PHP文件目录中。下面我们将创建一个嵌入了这个视频的PHP页面，该页面代码如下：

simptest.php

 

  1. <?php   
  2. require "DB.php";   
  3.     
  4. $moviebase = 'http://localhost:8080/movies/';   
  5.     
  6. $dsn = 'mysql://root@localhost/movies';   
  7. $db =& DB::connect( $dsn );   
  8. if ( PEAR::isError( $db ) ) { die($db->getMessage()); }   
  9.     
  10. $source = null;   
  11. $movieId = 1;   
  12. if ( array_key_exists( 'movie', $_GET ) )   
  13.   $movieId = $_GET['movie'];   
  14.     
  15. $movies = array();   
  16. $res = $db->query( 'SELECT movieId, source, title FROM movies' );   
  17. while( $row = $res->fetchrow( ) ) {   
  18.   $movies []= $row;   
  19.   if ( $row[0] == $movieId )   
  20.     $source = $row[1];   
  21. }   
  22.     
  23. if ( $source == null )   
  24.     $source = $movies[0][1];   
  25. ?>   
  26. <html>   
  27. <body>   
  28. <table>   
  29. <tr><td valign="top">   
  30. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400"   
  31.   height="335"   
  32.   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/  
  33. swflash.cab">   
  34. <param name="movie" value="simplemovie.swf" />   
  35. <param name="quality" value="high" />   
  36. <param name="flashVars" value="movie=<?php echo( $moviebase.$source ) ?>">   
  37. <embed src="simplemovie.swf" quality="high"   
  38.   width="400" height="335" play="true"   
  39.   loop="false"   
  40.   quality="high"   
  41.   flashVars="movie=<?php echo( $moviebase.$source ) ?>"   
  42.   type="application/x-shockwave-flash"   
  43.   pluginspage="http://www.adobe.com/go/getflashplayer">   
  44. </embed>   
  45. </object>   
  46. </td><td valign="top">   
  47. <?php   
  48. foreach( $movies as $movie ) {   
  49. ?>   
  50. <a href="simptest.php?movie=<?php echo( $movie[0] )?>"><?php echo( $movie[2] )?></a><br/>   
  51. <?php   
  52. }   
  53. ?>   
  54. </td></tr></table>   
  55. </body>   
  56. </html> 
  57.  

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

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

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


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

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

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

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

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

movies.php

  1. <?php   
  2. require "DB.php";   
  3.     
  4. $moviebase = 'http://localhost:8080/movies/';   
  5.     
  6. header( 'content-type: text/xml' );   
  7.     
  8. $dsn = 'mysql://root@localhost/movies';   
  9. $db =& DB::connect( $dsn );   
  10. if ( PEAR::isError( $db ) ) { die($db->getMessage()); }   
  11. ?>   
  12. <movies>   
  13. <?php   
  14. $res = $db->query( 'SELECT title, source, thumb, width, height FROM movies' );   
  15. while( $row = $res->fetchrow( ) ) {   
  16. ?>   
  17.   <movie title="<?php echo( $row[0] ) ?>" source="<?php echo( $moviebase.$row[1] ) ?>"   
  18.    thumb="<?php echo( $moviebase.$row[2] ) ?>" width="<?php echo( $row[3] ) ?>"   
  19.    height="<?php echo( $row[4] ) ?>" />   
  20. <?php   
  21. }   
  22. ?>   
  23. </movies> 
  24.  

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


图3.视频的XML列表

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

mytube1.mxml

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="movieXmlData.send()">   
  3.     
  4. <mx:HTTPService method="get" url="http://localhost:8080/movies.php" id="movieXmlData" result="onGetMovies( event )" />   
  5.     
  6. <mx:Script>   
  7. import mx.rpc.events.ResultEvent;   
  8. import mx.controls.VideoDisplay;   
  9. import mx.controls.List;   
  10. import mx.rpc.http.HTTPService;   
  11. import mx.collections.ArrayCollection;   
  12.     
  13. [Bindable]   
  14. private var movies : ArrayCollection = new ArrayCollection();   
  15.     
  16. public function onGetMovies( event : ResultEvent ) : void   
  17. {   
  18.   var firstMovie : String = event.result.movies.movie[0].source.toString();   
  19.   videoPlayer.source = firstMovie;   
  20.     
  21.   movies = event.result.movies.movie;   
  22.   movieList.selectedIndex = 0;   
  23. }   
  24.     
  25. public function onPrevious() : void   
  26. {   
  27.   if ( movieList.selectedIndex == 0 )   
  28.     movieList.selectedIndex = movies.length - 1;   
  29.   else   
  30.     movieList.selectedIndex -= 1;   
  31.   videoPlayer.source = this.movieList.selectedItem.source.toString();   
  32. }   
  33.     
  34. public function onPlay() : void   
  35. {   
  36.   videoPlayer.source = this.movieList.selectedItem.source.toString();   
  37.   videoPlayer.play();   
  38. }   
  39.     
  40. public function onNext() : void   
  41. {   
  42.   if ( movieList.selectedIndex >= ( movies.length - 1 ) )   
  43.     movieList.selectedIndex = 0;   
  44.   else   
  45.     movieList.selectedIndex += 1;   
  46.   videoPlayer.source = this.movieList.selectedItem.source.toString();   
  47. }   
  48.     
  49. public function onChange() : void   
  50. {   
  51.   videoPlayer.source = this.movieList.selectedItem.source.toString();   
  52. }   
  53. </mx:Script>   
  54.     
  55. <mx:HBox width="100%" paddingLeft="10" paddingTop="10" paddingRight="10">   
  56.   <mx:VBox>   
  57.     <mx:VideoDisplay width="400" height="300" id="videoPlayer" complete="onNext()" />   
  58.     <mx:HBox width="100%" horizontalAlign="center">   
  59.        <mx:Button label="<<" click="onPrevious()" />   
  60.        <mx:Button label="Play" click="onPlay()" />   
  61.        <mx:Button label=">>" click="onNext()" />   
  62.     </mx:HBox>   
  63.     </mx:VBox>   
  64.     <mx:List width="100%" height="340" id="movieList"   
  65.       dataProvider="{movies}"   
  66.       change="onChange()"   
  67.       labelField="title"></mx:List>   
  68. </mx:HBox>   
  69. </mx:Application> 
  70.  

明显的变化就是页面上半部分添加了很多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

... 
 

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

...

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

MovieItem.mxml

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

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

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

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

存储和带宽

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

总结

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

 

 

 

 

 


    泡泡熊 版权所有
    禁止任何用途（禁止转载、商用和个人使用）


所属分类：技术经验分享

本文标签：flex PHP 视频应用

各位正在潜水的同学请注意，有0位无聊人士 在EBIBI附近出没！







点击我更换图片 看不清
评论内容 (*必填)：

(Ctrl + Enter 快速提交)