视频网站的制作例子三

 

The first video starts right when I open the page. As I select each movie from the list on the right, the page reloads and shows the movie I selected.

How sweet and simple was that? One Flex file, one PHP file, and a little database magic for the backend, and viola! Video sharing!

The next step is to see whether you can enhance the user experience a bit by doing more of the work in Flex.

The Flex Interface, Part 1

If you want to provide a mechanism for Flex to show any movie, you must provide the Flex application with the list of movies. The most convenient way to do that is through XML. So, going back to PHP again, you need a page exports the movie list from the database as XML. This movies.php page is shown in Listing 6.

Listing 6. 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()); }
?>
<movies>
<?php
$res = $db->query( 'SELECT title, source, thumb, width, height FROM movies' );
while( $row = $res->fetchrow( ) ) {
?>
  <movie title="<?php echo( $row[0] ) ?>" source="<?php echo( $moviebase.$row[1] ) ?>" 
   thumb="<?php echo( $moviebase.$row[2] ) ?>" width="<?php echo( $row[3] ) ?>"
   height="<?php echo( $row[4] ) ?>" />
<?php
}
?>
</movies>

 

With the XML list of movies in hand, it's time to create a Flex application that extends the simplemovie.mxml player with the list of movies. This upgraded Flex application is shown in Listing 7.

Listing 7. mytube1.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="movieXmlData.send()">

<mx:HTTPService method="get" url="http://localhost:8080/movies.php" id="movieXmlData" result="onGetMovies( event )" />

<mx:Script>
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();
}
</mx:Script>

<mx:HBox width="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
  <mx:VBox>
    <mx:VideoDisplay width="400" height="300" id="videoPlayer" complete="onNext()" />
    <mx:HBox width="100%" horizontalAlign="center">
       <mx:Button label="<<" click="onPrevious()" />
       <mx:Button label="Play" click="onPlay()" />
       <mx:Button label=">>" click="onNext()" />
    </mx:HBox>
    </mx:VBox>
    <mx:List width="100%" height="340" id="movieList"
      dataProvider="{movies}"
      change="onChange()"
      labelField="title"></mx:List>
</mx:HBox>

</mx:Application>

 

Listing 4. simplemovie.mxml

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

Listing 5. 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( '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];
?>
<html>
<body>
<table>
<tr><td valign="top">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" 
  height="335"
  codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="simplemovie.swf" />
<param name="quality" value="high" />
<param name="flashVars" value="movie=<?php echo( $moviebase.$source ) ?>">
<embed src="simplemovie.swf" quality="high"
  width="400" height="335" play="true"
  loop="false"
  quality="high"
  flashVars="movie=<?php echo( $moviebase.$source ) ?>"
  type="application/x-shockwave-flash"
  pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</td><td valign="top">
<?php
foreach( $movies as $movie ) {
?>
<a href="simptest.php?movie=<?php echo( $movie[0] )?>"><?php echo( $movie[2] )?></a><br/>
<?php
}
?>
</td></tr></table>
</body>
</html>

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 )
);
mysql movies < movies.sql
<html>
<body>
<form enctype="multipart/form-data" method="post" action="upload.php">
<input type="hidden" name="MAX_FILE_SIZE" value="300000" />
<table>
<tr><td>Title</td><td><input type="text" name="title"></td></tr>
<tr><td>Movie</td><td><input type="file" name="movie"></td></tr>
</table>
<input type="submit" value="Upload" />
</form>
</body>
</html>
 
<html><body>
<?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
</body></html>


一直用smarty的cache，但感觉还是要自己做一个，才有感觉。网上有很多牛人的功能比较完备，打算先自己搞简单的再慢慢丰满。这两天做了一个比较简单的，在hi.baidu.net/alex_wang58记录一下。

一、用到的相关技术关键词:PHP， Apache，
                                               mod_rewrite （RewriteCond，RewriteRule）地址重写，
                                               ob系列函数缓冲
                                               file_put_contents生成html

二、流程：用户发出请求url?id=x ，判断文章是否存在
                        （1）存在则直接转到对应的Html页面。
                        （2）不存在通过php读取数据库数据，然后生成html文件，并存放到指定目录。

三、实现方法：
（1）地址重写用Apahce的mod_rewrite模块中的RewriteRule指令实现重写（mod_rewrite的开启和简单规则见本博另一篇http://hi.baidu.com/alex%5Fwang5 ... 0346ffb3fb952e.html ）。
（2）判断文章是否存在用Apahce 的mod_rewrite模块中的RewriteCond指令
（3）生成html文件：
           ob_star()打开缓冲，将读取文章的php包含进来，然后用file_put_contents将获得的缓冲内容写入指定HTMl文件。
四、代码


/Test 目录下的 .htaccess 文件内容：

RewriteEngine On
RewriteRule ^index.html$ /news.php [L]
RewriteCond %{REQUEST_FILENAME}  !-s
RewriteRule ^html/news_([0-9]+).html$ getnews.php?id=$1 [L]

对news.php的访问将通过 localhost/Test/index.html 实现由第二句 RewriteRule ^index.html$ Test/news.php [L] 实现

news.php =============================> news.php将列出文章标题链接。

复制PHP内容到剪贴板
PHP代码:

<?php
header("Content-Type:text/html; charset=gbk"); //以防出现乱码
mysql_connect("localhost","root","");
mysql_query('SET NAMES gbk'); //我的数据库用的gbk编码，请根据自己实际情况调整
mysql_select_db("test");

$sql = "SELECT `id`,`title` FROM `arc` order by `id` DESC";
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs) ){
echo "<a href='/Test/html/news_$row[id].html'>$row[title]</a><br>";
}
?>



比如生成了<a href='/Test/html/news_3.html'>php静态页实现</a>
当点击链接发出对 http://localhost/Test/html/news_3.html 的请求时
Apache将会判断 news_3.html  是否存在，由 .htaccess中的第三句
RewriteCond %{REQUEST_FILENAME}  !-s
实现：

     RewriteCond  是“定向重写发生条件”。REQUEST_FILENAME 这个参数是“客户端请求的文件名”
'-s'  (是一个非空的常规文件[size]) 测试指定文件是否存在而且是一个尺寸大于0的常规的文件.  ！表示匹配条件的反转。
所以 RewriteCond 这句就表示当请求链接不存在时 执行下面的 RewriteRule 规则。

所以当请求的news_3.html 不存在时会重写地址让 getnews.php?id=3 来处理（否则如果news_3.html 存在则直接就加载该html文件）。

getnews.php ===================>功能：判断参数传输的完整性，并调用相应文件生成html文件。


复制PHP内容到剪贴板
PHP代码:

<?php
$id =$_GET['id'];
$root =& $_SERVER['DOCUMENT_ROOT'];
$filename = "news_".$id.".html";
$file = $root."/Test/html/".$filename;
ob_start();
include($root."/Test/newsDetail.php");
file_put_contents($file,ob_get_contents());
ob_end_flush(); 
?>




newsDetail.php ====================> 从数据库中读取数据，产生新闻内容，内容被getnews.php捕获
复制PHP内容到剪贴板
PHP代码:

<?php
header("Content-Type:text/html; charset=gbk");
if( isset($_GET['id']) ){
$id = & $_GET['id'];
}else{
header("Location: [url]http://127.0.0.1/lean/Test/html/news_failed.html[/url]");
exit();
}
mysql_connect("localhost","root","");
mysql_query('SET NAMES gbk');
mysql_select_db("test");
$id =$_GET['id'];

$sql = "SELECT `news` FROM `arc` WHERE `id`=$id";
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs) ){
echo $row['news'];
}
?>



这样将会在/Test/html 目录下产生以 news_文章ID.html 命名的html文件。

PS: 一开始在判断是否存在相应html页面时采用的是 php 内置的 file_exists() 判断，而不用Apache的 RewriteCond，也即没有 RewriteCond %{REQUEST_FILENAME}  !-s。看似可行，但结果会产生“循环重定向”的问题。
       当news_3.html 不存在时 我们需要用 getnews.php生成news_3.html ，生成完毕后需要转向到 news_3.html ,于是又形成了一次请求mod_rewrite又启动把 news_3.html重写为 getnews.php?id=3 这就形成了死循环了。所以把文件存在性的判断交给 RewriteCond ，指定的html文件不存在时才启用重写规则。这样循环重定向的问题就没有了。
       一开始没有采用fopen打开newsDetail.php，然后再将生成的内容fwrite成html文件，然后include输出静态页面。后来在fhjr999的提醒下，改为：将newDetail.php包含进getnews.php,通过ob系列函数将生成的内容放入缓冲，然后再生成html文件。ob的效率是前者的20倍左右。