利用Flex和PHP创建网站视频发布系统 收藏.docx
《利用Flex和PHP创建网站视频发布系统 收藏.docx》由会员分享，可在线阅读，更多相关《利用Flex和PHP创建网站视频发布系统 收藏.docx（12页珍藏版）》请在冰豆网上搜索。
利用Flex和PHP创建网站视频发布系统收藏
利用Flex和PHP创建网站视频发布系统收藏
随着宽带的普及、硬盘空间的价格持续降低以及Adobe®Flash®Player和FlashVideo的实用性，视频分享在互联网上疯狂流行是不足为奇的。
像Googlevideo和YouTube这样的站点是领头羊，而现在已经到处都是小型的视频分享站点了。
那么，如何才能加入到潮流中去呢？
如何利用像PHP,Flash和AdobeFlex™等技术来创建自己的视频分享网站？
行动起来吧，它比你想象的要容易得多。
本文将告诉你如何创建网站的PHP部分以及如何使用Flex框架创建一个视频播放器。
要创建一个YouTube的简单版本（我们可以称它为MyTube），你需要有一些适当的工具。
在服务器端，你需要PHP和MySQL。
MySQL是用来存储有关视频的数据的（比如视频的文件名，缩略图，缩略图的高度和宽度，标题和描述）。
PHP将完成格式化页面的工作，包括HTML和XML页面，这取决于你想要怎么做。
你还需要一个开源的软件：
ffmpeg，它可以将用户上传的任何格式的视频文件转换成FlashVideo文件（FLV）。
当你向用户展示一个可用的视频列表时，这个ffmpeg软件还可以生成视频中某一帧的缩略图。
毫无疑问，在视频分享的世界中ffmpeg会是你最好的助手。
它是一个功能强大、易于使用而且文档齐全的极为优秀的软件。
在客户端，有几种不同的用户界面可供选择。
第一种就是类似于YouTube的HTML/Flash混合式的用户界面，另外一种就是完全基于Flash的用户界面。
这里我选择了Flex框架来创建一个Flash程序，这个程序首先播放视频，然后会列出一个可用视频的列表并提供导航。
创建PHP后台
创建后台的程序之前，你必须先在MySQL建立一些数据库模式（schema）。
首先，创建一个数据库，你可以使用mysqladmin命令行：
mysqladmincreatemovies
完成之后，将模式加载到数据库，模式文件内容如下：
movies.sql
DROPTABLEIFEXISTSmovies;
CREATETABLEmovies（
movieIdINTEGERNOTNULLAUTO_INCREMENT,
titleVARCHAR（255）,
sourceVARCHAR（255）,
thumbVARCHAR（255）,
widthINTEGER,
heightINTEGER,
PRIMARYKEY（movieId）
）;
要向数据库中添加数据，你需要开发一个HTML上传页面，它可以上传视频，将视频转换成FlashVideo，获得一个缩略图并将这些信息添加到数据库中。
创建上传页面
事实上，创建一个上传视频的HTML页很简单，如下：
addmovie.html
这个页面的表单提交到upload.php页，upload.php会处理视频，抓取缩略图并将数据添加到数据库中。
页面代码如下：
upload.php
php
require"DB.php";
functionconverttoflv（$in,$out）
{
unlink（$out）;
$cmd="ffmpeg-v0-i$in-ar11025$out2>&1";
$fh=popen（$cmd,"r"）;
while（fgets（$fh））{}
pclose（$fh）;
}
functiongetthumbnail（$in,$out）
{
unlink（$out）;
$cmd="ffmpeg-i$in-pix_fmtrgb24-vframes1-s300x200$out2>&1";
$fh=popen（$cmd,"r"）;
while（fgets（$fh））{}
pclose（$fh）;
}
functionflv_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（'INSERTINTOmoviesVALUES（0,?
?
?
?
?
）'）;
$db->execute（$sth,array（$title,$flvpath,$thumbpath,300,200））;
}
flv_import（$_FILES['movie']['tmp_name'],$_FILES['movie']['name'],$_POST['title']）;
?
>
Filesucessfullyuploaded
函数flv_import（）是脚本代码的核心部分，它调用了converttoflv（）函数和getthumbnail（）函数来将视频转换成FlashVideo文件和创建缩略图。
然后
当我打开addmovie.html页面的时候，我做了一下截图，见图1.
图1.上传视频的页面
现在你就可以点击Upload按钮上传视频到服务器进行处理了。
upload.php页面中的脚本只是一些很基础的代码。
如果向将其投入使用，你需要添加一些错误验证代码。
这些脚本最大的问题就是处理较大的视频文件的能力。
较大的视频文件需要转换很长时间，用户也需要等待很长时间才行。
为了能够支持大的视频文件（比如长于10秒钟的视频），我建议你简单地将视频复制到一个文件夹中，然后通知用户该视频稍后将会出现在网站上。
然后你可以编写一段脚本来处理该文件夹中的视频。
这里我觉得有必要说明一下为什么要把视频转换成FlashVideo。
当然，在FlashPlayer中我需要使用FlashVideo来观看视频。
但是不只是那样，如果我不进行转换的话就要显示每个视频的播放器是什么，而且还要帮助用户找到并安装适用于他们系统的播放器。
这将需要大量的工作。
将所有的视频转换成FlashVideo的最大优点——同时也是使用Flex编写的FlashPlayer的最大优点——就是它几乎可以在任何地方运行。
下一步就是创建一个类似YouTube的简单的HTML/Flash界面。
创建HTML/Flash界面
在AdobeFlexBuilder™2创建一个新的Flex工程，然后创建一个Flash视频，这个视频通过给定的URL找到视频并播放。
我们将这个Flex应用程序文件命名为simplemovie.mxml，代码如下：
simplemovie.mxml
xmlversion="1.0"encoding="utf-8"?
>
Applicationxmlns:
mx="layout="absolute">
VBoxbackgroundColor="white"width="400"height="335">
VideoDisplaywidth="400"height="300"id="videoPlayer"
source="{Application.application.parameters.movie}"/>
HBoxwidth="100%"horizontalAlign="center">
Buttonlabel="Play"click="videoPlayer.play（）"/>
HBox>
VBox>
Application>
这个简单的Flex程序包括两部分：
一个用来播放视频的VideoDisplay组件以及一个Play按钮，当视频播放完毕时用户可以点击按钮重新播放。
VideoDisplay组件有一个source属性，它包含了视频FLV文件的URL地址。
在这里，它的值是一个程序变量，这个变量是HTML中的
使用FlexBuilder将simplemovie.mxml编译成simplemovie.swf文件然后将其从bin文件夹中移动到PHP文件目录中。
下面我们将创建一个嵌入了这个视频的PHP页面，该页面代码如下：
simptest.php
php
require"DB.php";
$moviebase='http:
//localhost:
8080/movies/';
$dsn='mysql:
//root@localhost/movies';
$db=&DB:
:
connect（$dsn）;
if（PEAR:
:
isError（$db））{die（$db->getMessage（））;}
$source=null;
$movieId=1;
if（array_key_exists（'movie',$_GET））
$movieId=$_GET['movie'];
$movies=array（）;
$res=$db->query（'SELECTmovieId,source,titleFROMmovies'）;
while（$row=$res->fetchrow（））{
$movies[]=$row;
if（$row[0]==$movieId）
$source=$row[1];
}
if（$source==null）
$source=$movies[0][1];
?
>
D27CDB6E-AE6D-11cf-96B8-444553540000"width="400"
height="335"
codebase="
swflash.cab">
phpecho（$moviebase.$source）?
>">
width="400"height="335"play="true"
loop="false"
quality="high"
flashVars="movie=
phpecho（$moviebase.$source）?
>"
type="application/x-shockwave-flash"
pluginspage="
php
foreach（$moviesas$movie）{
?
>
movie=
phpecho（$movie[0]）?
>">
phpecho（$movie[2]）?
>
php
}
?
>
|
它向数据库中添加了有关视频的一些数据。
有关FLV和缩略图的功能都使用了ffmpeg中的命令行来处理视频。
在上面的代码中，一开始是连接到数据库并获取视频列表。
然后它就开始查找是否有与URL中ID匹配的视频ID，如果有匹配的视频ID，它就会将这个ID赋值给movie变量并通过flashVars参数传送到simplemovie.swf文件。
接下来，在HTML代码中创建了
然后又创建了一个列表列出了所有可用的视频，这个列表中的每一项都提供了它们对应视频的正确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（））;}
?
>
php
$res=$db->query（'SELECTtitle,source,thumb,width,heightFROMmovies'）;
while（$row=$res->fetchrow（））{
?
>
phpecho（$row[0]）?
>"source="
phpecho（$moviebase.$row[1]）?
>"
thumb="
phpecho（$moviebase.$row[2]）?
>"width="
phpecho（$row[3]）?
>"
height="
phpecho（$row[4]）?
>"/>
php
}
?
>
你可以通过命令行运行它然后查看生成的XML，也可以在浏览器中打开这个页面然后你就可以看到以树形方式显示的XML，见图3：
图3.视频的XML列表
有了这个XML列表，我们就可以创建一个扩展自simplemovie.mxml的Flex程序，代码如下：
mytube1.mxml
xmlversion="1.0"encoding="utf-8"?
>
Applicationxmlns:
mx="layout="absolute"creationComplete="movieXmlData.send（）">
HTTPServicemethod="get"url="http:
//localhost:
8080/movies.php"id="movieXmlData"result="onGetMovies（event）"/>
Script>
importmx.rpc.events.ResultEvent;
importmx.controls.VideoDisplay;
importmx.controls.List;
importmx.rpc.http.HTTPService;
importmx.collections.ArrayCollection;
[Bindable]
privatevarmovies:
ArrayCollection=newArrayCollection（）;
publicfunctiononGetMovies（event:
ResultEvent）:
void
{
varfirstMovie:
String=event.result.movies.movie[0].source.toString（）;
videoPlayer.source=firstMovie;
movies=event.result.movies.movie;
movieList.selectedIndex=0;
}
publicfunctiononPrevious（）:
void
{
if（movieList.selectedIndex==0）
movieList.selectedIndex=movies.length-1;
else
movieList.selectedIndex-=1;
videoPlayer.source=this.movieList.selectedItem.source.toString（）;
}
publicfunctiononPlay（）:
void
{
videoPlayer.source=this.movieList.selectedItem.source.toString（）;
videoPlayer.play（）;
}
publicfunctiononNext（）:
void
{
if（movieList.selectedIndex>=（movies.length-1））
movieList.selectedIndex=0;
else
movieList.selectedIndex+=1;
videoPlayer.source=this.movieList.selectedItem.source.toString（）;
}
publicfunctiononChange（）:
void
{
videoPlayer.source=this.movieList.selectedItem.source.toString（）;
}
Script>
HBoxwidth="100%"paddingLeft="10"paddingTop="10"paddingRight="10">
VBox>
VideoDisplaywidth="400"height="300"id="videoPlayer"complete="onNext（）"/>
HBoxwidth="100%"horizontalAlign="center">
Buttonlabel="<<"click="onPrevious（）"/>
Buttonlabel="Play"click="onPlay（）"/>
Buttonlabel=">>"click="onNext（）"/>
HBox>
VBox>
Listwidth="100%"height="340"id="movieList"
dataProvider="{movies}"
change="onChange（）"
labelField="title">
List>
HBox>
Application>
明显的变化就是页面上半部分添加了很多ActionScript代码，它们用来管理界面。
这些代码首先在onGetMovies（）使用HTTPService从movies.php中读取XML。
当HTTPService类检测到XML时会立刻返回一个XML文档对象模型（DOM），然后我们就可以使用这个DOM来读取第一个视频并播放它。
函数onGetMovies（）还设定了一个movies变量来存储列表框中要显示的视频。
ActionScript代码中的其它方法处理界面可能触发的不同事件，例如用户点击了视频列表、点击了“上一个”或“下一个”按钮等等。
最下面的代码是一些组成用户界面的Flex组件。
其中有一些按钮——左箭头和右箭头——来切换到下一个或上一个视频。
在VideoDisplay的右边有一个视频列表，在这里该列表只是列出了视频的名字。
使用Flex编译并运行程序，结果如图4：
图4.Flex用户界面的第一个版本
现在我们可以使用右边的列表来选择视频，或者通过按下左/右按钮在视频之间切换。
这个程序已经相当不错了，不过我们的缩略图在哪里使用了呢？
Flex界面，第二部分——添加了缩略图
要在列表中使用缩略图，你需要对列表做一下更
升级会员 