flv视频网站制作 使用Flex和PHP创建自己的视频应用英文原文:Creating MyTube with Flex and PHP 原文地址: http://www.onlamp.com/pub/a/php/ ... h-flex-and-php.html 原文作者:Jack Herrington 随着宽带的普及、硬盘空间的价格持续降低以及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 完成之后,将模式加载到数据库,模式文件内容如下: 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 复制内容到剪贴板 代码: 这个页面的表单提交到 upload.php 页,upload.php 会处理视频,抓取缩略图并将数据添加到数据库中。页面代码如下: upload.php 复制内容到剪贴板 代码: require "DB.php"; function converttoflv( $in, $out ) { unlink( $out ); $cmd = "ffmpeg -v 0 -i $in -ar 11025 $out 2>&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['title'] ); ?> File sucessfully uploaded 函数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 界面。 创建 HTML/Flash 界面 在Adobe Flex Builder? 2创建一个新的Flex 工程,然后创建一个Flash视频,这个视频通过给定的URL找到视频并播放。我们将这个Flex应用程序文件命名为simplemovie.mxml,代码如下: simplemovie.mxml 复制内容到剪贴板 代码: $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( '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]; ?> header( 'content-type: text/xml' ); $dsn = 'mysql://root@localhost/movies'; $db =& DB::connect( $dsn ); if ( PEAR::isError( $db ) ) { die($db->getMessage()); } ?> $res = $db->query( 'SELECT title, source, thumb, width, height FROM movies' ); while( $row = $res->fetchrow( ) ) { ?> thumb="" width="" height="" /> } ?> 你可以通过命令行运行它然后查看生成的XML,也可以在浏览器中打开这个页面然后你就可以看到以树形方式显示的XML,见图3: 图3.视频的XML列表 有了这个XML列表,我们就可以创建一个扩展自simplemovie.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(); } dataProvider="{movies}" change="onChange()" labelField="title"> 明显的变化就是页面上半部分添加了很多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 复制内容到剪贴板 代码: ... dataProvider="{movies}" change="onChange()" itemRenderer="MovieItem"> ... 这个itemRenderer是一个由你自己创建的MXML组件,而且它的文件名必须是MovieItem。你可以通过选择菜单中的 New > MXML Component 来创建文件,然后将下面的代码添加进去: MovieItem.mxml 复制内容到剪贴板 代码: height="{data.height/3}" rotation="5" left="10" top="0" /> 我使用了Canvas容器,这样我就可以按照自己的想法定位其中的组件了,当然,你可以使用最适合你的布局的容器。然后,我使用了一 个标签用来加载图像并使用了一个标签来显示标题。为了使其看起来有趣一点,我们将图像 稍微旋转了一下。最终的效果见图5。 图5.使用了缩略图的加强版列表框 好了,这个外观虽然不是特别好,但是它比单纯的文笔列表酷多了。接下来你可以在这个组件中添加更多想要的东西,比如视频描述、运行时间、链接、评分按钮等等。 存储和带宽 虽然建立前台程序和数据库操作相对来说很简单,但是这并不是建立一个视频分享网站要面对的唯一问题。目前来说带宽是主要的问题。这些视频,即使格式为编码紧凑的Flash Video,也是相当大的文件。如何在不耗尽带宽的情况下提供视频服务是值得好好考虑的。 当然,解决带宽的一个办法就是买一个更大的连接或者将主机放到宽带情况比较好的数据中心。另外一个选择就是把网站和数据分离,将视频文件存储到其它的地方。Amazon’s S3 service 就提供了一种简单的方式,你只要付相当少的费用就可以用一种富余和可升级的方式存储和分享大的文件。在早期使用 S3 来存储网站上的视频文件可以帮你节省一大笔基础设施的费用,而且可以一直使用到网站足够受欢迎可以支付基础设施费用的时候。 总结 随着Flash Video的出现和宽带的广泛普及,现在用很少的费用建立一个视频分享网站不再是天方夜谭了。我希望这个例子可以告诉你使用Flex/PHP建立一个视频分享网站是多么容易并激发你的进一步探索。 |
推荐阅读
-
如何解决《免费的RESTfulAPIBuilder比较》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《CloudFront+S3网站:应显示隐式索引文档时"指定的密钥不存在"》经验,为你挑选了2个好方法。 ...
[详细]
-
如何解决《使用网络摄像头拍照是黑色输出[Unity3D]》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《如何实现S3类的名称?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《react-native将子视图置于最前面》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《查看mysql查询缓存内容》经验,为你挑选了2个好方法。 ...
[详细]
-
如何解决《Chrome扩展程序存储了大量数据》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《无法运行总计工作》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《NettePHP框架和带有令牌认证的RESTfulAPI》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《git和vimdiff-一次关闭所有文件》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《逻辑运算符和分支预测失败》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《在perl脚本中使用$self创建实例时出错》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何在xamarin.formspcl项目中配置地图?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《在Java中创建太多线程》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《复选框未在javascript中检查?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何使用包含swift中相同键的多个值的查询参数构建URL?》经验,为你挑选了3个好方法。 ...
[详细]
-
如何解决《将指针传递给constref函数》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《是否有可用的应用内聊天SDK?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《禁止不断访问我的C#/Azure网站的IP地址?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《反应警告渲染()》经验,为你挑选了1个好方法。 ...
[详细]
云聪京初瑞子_617
这个屌丝很懒,什么也没留下!
|