搜索

flv+php视频网站制作攻略

1#

发表于 2008-11-14 19:55 | 只看该作者 | 倒序看帖 | 打印

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 复制内容到剪贴板 代码:







Title
Movie





这个页面的表单提交到 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 复制内容到剪贴板 代码:



       source="{Application.application.parameters.movie}" />
  
   
  



这个简单的Flex程序包括两部分:一个用来播放视频的VideoDisplay组件以及一个Play 按钮,当视频播放完毕时用户可以点击按钮重新播放。
VideoDisplay 组件有一个 source 属性,它包含了视频FLV文件的URL地址。在这里,它的值是一个程序变量,这个变量是HTML中的标签的FlashVars属性所提供的。
使用Flex Builder将simplemovie.mxml编译成simplemovie.swf文件然后将其从bin文件夹中移动到PHP文件目录中。下面我们将创建一个嵌入了这个视频的PHP页面,该页面代码如下:
simptest.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( '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];
?>




  height="335"
  codebase="http://fpdownload.macromedia.com/get/flashplayer/current/
swflash.cab">



  width="400" height="335" play="true"
  loop="false"
  quality="high"
  flashVars="movie="
  type="application/x-shockwave-flash"
  pluginspage="http://www.adobe.com/go/getflashplayer">



foreach( $movies as $movie ) {
?>


}
?>



在上面的代码中,一开始是连接到数据库并获取视频列表。然后它就开始查找是否有与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 复制内容到剪贴板 代码:
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()); }
?>

$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 复制内容到剪贴板 代码:


  

  
<script> <br> import mx.rpc.events.ResultEvent; <br> import mx.controls.VideoDisplay; <br> import mx.controls.List; <br> import mx.rpc.http.HTTPService; <br> import mx.collections.ArrayCollection; <br>   <br> [Bindable] <br> private var movies : ArrayCollection = new ArrayCollection(); <br>   <br> public function onGetMovies( event : ResultEvent ) : void <br> { <br>   var firstMovie : String = event.result.movies.movie[0].source.toString(); <br>   videoPlayer.source = firstMovie; <br>   <br>   movies = event.result.movies.movie; <br>   movieList.selectedIndex = 0; <br> } <br>   <br> public function onPrevious() : void <br> { <br>   if ( movieList.selectedIndex == 0 ) <br>     movieList.selectedIndex = movies.length - 1; <br>   else <br>     movieList.selectedIndex -= 1; <br>   videoPlayer.source = this.movieList.selectedItem.source.toString(); <br> } <br>   <br> public function onPlay() : void <br> { <br>   videoPlayer.source = this.movieList.selectedItem.source.toString(); <br>   videoPlayer.play(); <br> } <br>   <br> public function onNext() : void <br> { <br>   if ( movieList.selectedIndex >= ( movies.length - 1 ) ) <br>     movieList.selectedIndex = 0; <br>   else <br>     movieList.selectedIndex += 1; <br>   videoPlayer.source = this.movieList.selectedItem.source.toString(); <br> } <br>   <br> public function onChange() : void <br> { <br>   videoPlayer.source = this.movieList.selectedItem.source.toString(); <br> } <br> </script>
  

  
   
   
      
      
      
   

   

          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容器,这样我就可以按照自己的想法定位其中的组件了,当然,你可以使用最适合你的布局的容器。然后,我使用了一 个标签用来加载图像并使用了一个
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
哪些常见问题会导致PHP会话失败?哪些常见问题会导致PHP会话失败?Apr 25, 2025 am 12:16 AM

PHPSession失效的原因包括配置错误、Cookie问题和Session过期。1.配置错误:检查并设置正确的session.save_path。2.Cookie问题:确保Cookie设置正确。3.Session过期:调整session.gc_maxlifetime值以延长会话时间。

您如何在PHP中调试与会话相关的问题?您如何在PHP中调试与会话相关的问题?Apr 25, 2025 am 12:12 AM

在PHP中调试会话问题的方法包括:1.检查会话是否正确启动;2.验证会话ID的传递;3.检查会话数据的存储和读取;4.查看服务器配置。通过输出会话ID和数据、查看会话文件内容等方法,可以有效诊断和解决会话相关的问题。

如果session_start()被多次调用会发生什么?如果session_start()被多次调用会发生什么?Apr 25, 2025 am 12:06 AM

多次调用session_start()会导致警告信息和可能的数据覆盖。1)PHP会发出警告,提示session已启动。2)可能导致session数据意外覆盖。3)使用session_status()检查session状态,避免重复调用。

您如何在PHP中配置会话寿命?您如何在PHP中配置会话寿命?Apr 25, 2025 am 12:05 AM

在PHP中配置会话生命周期可以通过设置session.gc_maxlifetime和session.cookie_lifetime来实现。1)session.gc_maxlifetime控制服务器端会话数据的存活时间,2)session.cookie_lifetime控制客户端cookie的生命周期,设置为0时cookie在浏览器关闭时过期。

使用数据库存储会话的优点是什么?使用数据库存储会话的优点是什么?Apr 24, 2025 am 12:16 AM

使用数据库存储会话的主要优势包括持久性、可扩展性和安全性。1.持久性:即使服务器重启,会话数据也能保持不变。2.可扩展性:适用于分布式系统,确保会话数据在多服务器间同步。3.安全性:数据库提供加密存储,保护敏感信息。

您如何在PHP中实现自定义会话处理?您如何在PHP中实现自定义会话处理?Apr 24, 2025 am 12:16 AM

在PHP中实现自定义会话处理可以通过实现SessionHandlerInterface接口来完成。具体步骤包括:1)创建实现SessionHandlerInterface的类,如CustomSessionHandler;2)重写接口中的方法(如open,close,read,write,destroy,gc)来定义会话数据的生命周期和存储方式;3)在PHP脚本中注册自定义会话处理器并启动会话。这样可以将数据存储在MySQL、Redis等介质中,提升性能、安全性和可扩展性。

什么是会话ID?什么是会话ID?Apr 24, 2025 am 12:13 AM

SessionID是网络应用程序中用来跟踪用户会话状态的机制。1.它是一个随机生成的字符串,用于在用户与服务器之间的多次交互中保持用户的身份信息。2.服务器生成并通过cookie或URL参数发送给客户端,帮助在用户的多次请求中识别和关联这些请求。3.生成通常使用随机算法保证唯一性和不可预测性。4.在实际开发中,可以使用内存数据库如Redis来存储session数据,提升性能和安全性。

您如何在无状态环境(例如API)中处理会议?您如何在无状态环境(例如API)中处理会议?Apr 24, 2025 am 12:12 AM

在无状态环境如API中管理会话可以通过使用JWT或cookies来实现。1.JWT适合无状态和可扩展性,但大数据时体积大。2.Cookies更传统且易实现,但需谨慎配置以确保安全性。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具