flex+php创建自己的视频Word格式.docx
《flex+php创建自己的视频Word格式.docx》由会员分享，可在线阅读，更多相关《flex+php创建自己的视频Word格式.docx（11页珍藏版）》请在冰豆网上搜索。
/body>
/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）
ffmpeg-i$in-pix_fmtrgb24-vframes1-s300x200$out2>
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['
name'
],$_POST['
title'
]）;
Filesucessfullyuploaded
函数flv_import（）是脚本代码的核心部分，它调用了converttoflv（）函数和getthumbnail（）函数来将视频转换成FlashVideo文件和创建缩略图。
然后它向数据库中添加了有关视频的一些数据。
有关FLV和缩略图的功能都使用了ffmpeg中的命令行来处理视频。
当我打开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"
mx:
Applicationxmlns:
mx="
layout="
absolute"
VBoxbackgroundColor="
white"
width="
400"
height="
335"
<
VideoDisplaywidth="
300"
id="
videoPlayer"
source="
{Application.application.parameters.movie}"
HBoxwidth="
100%"
horizontalAlign="
center"
Buttonlabel="
Play"
click="
videoPlayer.play（）"
/mx:
HBox>
VBox>
Application>
这个简单的Flex程序包括两部分：
一个用来播放视频的VideoDisplay组件以及一个Play按钮，当视频播放完毕时用户可以点击按钮重新播放。
VideoDisplay组件有一个source属性，它包含了视频FLV文件的URL地址。
在这里，它的值是一个程序变量，这个变量是HTML中的<
object>
或<
embed>
标签的FlashVars属性所提供的。
使用FlexBuilder将simplemovie.mxml编译成simplemovie.swf文件然后将其从bin文件夹中移动到PHP文件目录中。
下面我们将创建一个嵌入了这个视频的PHP页面，该页面代码如下：
simptest.php
$moviebase='
http:
//localhost:
8080/movies/'
$dsn='
$db=&
if（PEAR:
$source=null;
$movieId=1;
if（array_key_exists（'
$_GET））
$movieId=$_GET['
];
$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];
tdvalign="
top"
objectclassid="
clsid:
D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="
swflash.cab"
paramname="
simplemovie.swf"
quality"
high"
flashVars"
movie=<
phpecho（$moviebase.$source）?
"
embedsrc="
quality="
play="
true"
loop="
false"
flashVars="
type="
application/x-shockwave-flash"
pluginspage="
/embed>
/object>
foreach（$moviesas$movie）{
ahref="
simptest.php?
phpecho（$movie[0]）?
phpecho（$movie[2]）?
/a>
br/>
在上面的代码中，一开始是连接到数据库并获取视频列表。
然后它就开始查找是否有与URL中ID匹配的视频ID，如果有匹配的视频ID，它就会将这个ID赋值给movie变量并通过flashVars参数传送到simplemovie.swf文件。
接下来，在HTML代码中创建了<
和<
标签用来嵌入simplemovie.swf，标签中也提供了视频的正确URL地址。
然后又创建了一个列表列出了所有可用的视频，这个列表中的每一项都提供了它们对应视频的正确ID并链接到了本页。
在浏览器中运行这个页面的结果如图2：
图2.简单的视频播放器和视频列表
当我打开页面的时候第一个视频开始播放。
当我选择右边列表中的某个视频的时候，页面就会重新载入并播放选中的视频。
是不是很简单？
一个Flex文件，一个PHP文件再加上后台的一点数据库操作，哇！
一个视频分享网站出现了！
接下来我们将在Flex中做一些工作来增强用户体验。
Flex界面，第一部分
如果你想让Flex播放视频，你必须向Flex程序提供视频列表。
最简便的方法就是通过XML。
所以，现在我们要返回PHP的部分，编写一个可以将数据库中的视频列表抽取到XML文件的页面。
movies.php就实现了这个功能，代码如下：
movies.php
header（'
content-type:
text/xml'
movies>
SELECTtitle,source,thumb,width,heightFROMmovies'
movietitle="
phpecho（$row[0]）?
phpecho（$moviebase.$row[1]）?
thumb="
phpecho（$moviebase.$row[2]）?
phpecho（$row[3]）?
phpecho（$row[4]）?
/movies>
你可以通过命令行运行它然后查看生成的XML，也可以在浏览器中打开这个页面然后你就可以看到以树形方式显示的XML，见图3：
图3.视频的XML列表
有了这个XML列表，我们就可以创建一个扩展自simplemovie.mxml的Flex程序，代码如下：
mytube1.mxml
creationComplete="
movieXmlData.send（）"
HTTPServicemethod="
get"
url="
8080/movies.php"
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（）:
if（movieList.selectedIndex==0）
movieList.selectedIndex=movies.length-1;
else
movieList.selectedIndex-=1;
videoPlayer.source=this.movieList.selectedItem.source.toString（）;
publicfunctiononPlay（）:
videoPlayer.play（）;
publicfunctiononNext（）:
if（movieList.selectedIndex>
=（movies.length-1））
movieList.selectedIndex+=1;
publicfunctiononChange（）:
paddingLeft="
10"
paddingTop="
paddingRight="
complete="
onNext（）"
onPrevious（）"
onPlay（）"
Listwidth="
340"
movieList"
dataProvider="
{movies}"
change="
onChange（）"
labelField="
List>
明显的变化就是页面上半部分添加了很多ActionScript代码，它们用来管理界面。
这些代码首先在onGetMovies（）使用HTTPService从movies.php中读取XML。
当HTTPService类检测到XML时会立刻返回一个XML文档对象模型（DOM），然后我们就可以使用这个DOM来读取第一个视频并播放它。
函数onGetMovies（）还设定了一个movies变量来存储列表框中要显示的视频。
ActionScript代码中的其它方法处理界面可能触发的不同事件，例如用户点击了视频列表、点击了“上一个”或“下一个”按钮等等。
最下面的代码是一些组成用户界面的Flex组件。
其中有一些按钮——左箭头和右箭头——来切换到下一个或上一个视频。
在VideoDisplay的右边有一个视频列表，在这里该列表只是列出了视频的名字。
使用Flex编译并运行程序，结果如图4：
图4.Flex用户界面的第一个版本
现在我们可以使用右边的列表来选择视频，或者通过按下左/右按钮在视频之间切换。
这个程序已经相当不错了，不过我们的缩略图在哪里使用了呢？
Flex界面，第二部分——添加了缩略图
要在列表中使用缩略图，你需要对列表做一下更改使其可以同时显示缩略图及其标题。
幸运的是在Flex中实现这一点很容易。
首先我们要修改<
标签为其添加一个itemRenderer，代码如下：
mytube2.mxml
...
itemRenderer="
MovieItem"
...
这个itemRenderer是一个由你自己创建的MXML组件，而且它的文件名必须是MovieItem。
你可以通过选择菜单中的New>
MXMLComponent来创建文件，然后将下面的代码添加进去：
MovieItem.mxml
Canvasxmlns:
80"
Imagesource="
{data.thumb}"
{data.width/3}"
{data.height/3}"
rotation="
5"
left="
top="
0"
Labeltext="
{data.title}"
fontWeight="
bold"
100"
fontSize="
18"
Canvas>
我使用了Canvas容器，这样我就可以按照自己的想法定位其中的组件了，当然，你可以使用最适合你的布局的容器。
然后，我使用了一个<
Image>
标签用来加载图像并使用了一个<
label>
标签来显示标题。
为了使其看起来有趣一点，我们将图像稍微旋转了一下。
最终的效果见图5。
图5.使用了缩略图的加强版列表框
好了，这个外观虽然不是特别好，但是它比单纯的文笔列表酷多了。
接下来你可以在这个组件中添加更多想要的东西，比如视频描述、运行时间、链接、评分按钮等等。
存储和带宽
虽然建立前台程序和数据库操作相对来说很简单，但是这并不是建立一个视频分享网站要面对的唯一问题。
目前来说带宽是主要的
升级会员 