php+flv

WBOY
リリース: 2016-06-23 14:37:02
オリジナル
1191 人が閲覧しました

flv+php ビデオ Web サイト制作ガイド

1#

公開日: 2008-11-14 19:55 | 投稿を逆順に表示



flv ビデオ Web サイト制作では、Flex と PHP を使用して独自のビデオ アプリケーションを作成します。 英語原文: Create MyTube with Flex and PHP
元のアドレス:
http://www.onlamp.com/pub/a/php /. .. h-flex-and-php.html
原文の作成者: Jack Herrington

ブロードバンドの普及により、ハードドライブ容量の価格が下がり続け、Adobe® Player と Flash Video の実用性が高まりました。 、ビデオ共有がインターネット上で大流行しているのは当然のことです。 Google ビデオや YouTube などのサイトがリーダーでしたが、今では小規模なビデオ共有サイトがどこにでも存在します。では、どうすればこのトレンドに参加できるのでしょうか? PHP、Flash、Adobe Flex などのテクノロジーを使用して独自のビデオ共有 Web サイトを作成するにはどうすればよいですか?始めましょう。思ったよりも簡単です。

この記事では、Web サイトの PHP 部分を作成する方法と、Flex フレームワークを使用してビデオ プレーヤーを作成する方法について説明します。 YouTube の簡易バージョン (MyTube と呼ぶことができます) を作成するには、適切なツールが必要です。

サーバー側では、PHP と MySQL が必要です。 MySQL は、ビデオに関するデータ (ビデオのファイル名、サムネイル、サムネイルの高さと幅、タイトルと説明など) を保存するために使用されます。 PHP は、希望に応じて、HTML ページと XML ページの両方をフォーマットする仕事を行います。

オープンソース ソフトウェア ffmpeg も必要です。これは、ユーザーがアップロードした任意の形式のビデオ ファイルを Flash ビデオ ファイル (FLV) に変換できます。この ffmpeg ソフトウェアは、利用可能なビデオのリストをユーザーに提示するときに、ビデオ内のフレームのサムネイルを生成することもできます。 ffmpeg がビデオ共有の世界で最高のアシスタントになることは間違いありません。これは、強力で使いやすく、十分に文書化されている非常に優れたソフトウェアです。

クライアント側では、いくつかの異なるユーザー インターフェイスから選択できます。 1 つは YouTube に似た HTML/Flash ハイブリッド ユーザー インターフェイスであり、もう 1 つは完全に Flash に基づいたユーザー インターフェイスです。ここでは、最初にビデオを再生し、次に利用可能なビデオのリストを表示し、ナビゲーションを提供する Flash プログラムを作成するために Flex フレームワークを選択しました。

PHP バックエンドを作成する

バックエンド プログラムを作成する前に、まず MySQL でいくつかのデータベース スキーマを確立する必要があります。まず、データベースを作成します。mysqladmin コマンド ラインを使用できます。内容をクリップボード コードにコピーします。mysqladmin create movie
完了後、スキーマ ファイルの内容は次のとおりです。 SQL コンテンツをクリップボード コードにコピーします: DROP TABLE IF EXISTS 映画;
CREATE TABLE 映画 (
movieId INTEGER NOT NULL AUTO_INCREMENT,
title VARCHAR( 255 ),
source VARCHAR( 255 ),
width INTEGER,
height INTEGER, PRI
MARY KEY ( movieId )
);
データベースにデータを追加するには、ビデオをアップロードし、ビデオを Flash Video に変換し、サムネイルを取得して、この情報をデータベースに追加できる HTML アップロード ページを開発する必要があります。



アップロード ページを作成する
実際、ビデオをアップロードするための HTML ページの作成は次のように非常に簡単です:
addmovie.html コンテンツをクリップボード コードにコピーします:

タイトル
; 映画



このページのフォームは、upload.php ページに送信されます。サムネイルとデータがデータベースに追加されます。ページのコードは次のとおりです:
Upload.php コンテンツをクリップボード コードにコピーします:
require "DB.php"( $in, $; out )
{
unlink( $out );
$cmd = "ffmpeg -v 0 -i $in -ar 11025 $out 2>&1";
$fh = Popen( $cmd, "r" ); ( 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 movie VALUES ( 0, ?, ?, ?, ?, ? )' );
$db->execute( $sth, array( $title, $flvpath, $thumbpath, 300, 200 ) );
}

flv_import( $_FILES['movie']['tmp_name'], $_FILES['movie']['name'], $_POST['title'] );
?>
ファイルは正常にアップロードされました

関数flv_import() は脚本の核心部分、它调用了converttoflv() 関数と getthumbnail() 関数はビデオを Flash ビデオファイルと创建に変換しますその後、関連するビデオのいくつかのデータがデータベースに追加されます。 FLV と短縮図に関連する機能はいずれも、ffmpeg 内のコマンド行を使用してビデオを処理します。 ,见图1.

图1.上传ビデオ的页面
これで、「アップロード」ボタンをクリックしてビデオをサーバーにアップロードして処理できるようになります。
Upload.php ページのスクリプトは、非常に基本的なコードの一部にすぎません。これを使用したい場合は、エラー検証コードを追加する必要があります。これらのスクリプトの最大の問題は、より大きなビデオ ファイルを処理できることです。大きなビデオファイルは変換に時間がかかり、ユーザーも長時間待つ必要があります。
大きなビデオ ファイル (10 秒を超えるビデオなど) をサポートできるようにするには、ビデオをフォルダーにコピーし、後でビデオがサイトに表示されることをユーザーに通知することをお勧めします。その後、そのフォルダー内のビデオを処理するスクリプトを作成できます。
ここで、なぜビデオを Flash ビデオに変換する必要があるのか​​を説明する必要があると思います。もちろん、Flash Player でビデオを見るには Flash Video を使用する必要があります。しかし、それだけではなく、変換しない場合に各ビデオのプレーヤーが何であるかを示すだけでなく、ユーザーが自分のシステム用のプレーヤーを見つけてインストールするのにも役立ちます。これには多くの作業が必要になります。すべてのビデオを Flash Video に変換する最大の利点は、Flex で作成された Flash Player の最大の利点でもあり、ほぼどこでも実行できることです。
次のステップは、YouTube に似た単純な HTML/Flash インターフェイスを作成することです。



HTML/Flash インターフェイスを作成する
Adob​​e Flex Builder 2 で新しい Flex プロジェクトを作成し、Flash ビデオを作成します。このビデオは、指定された URL を通じてビデオを検索して再生します。この Flex アプリケーション ファイルに simplemovie.mxml という名前を付けます。コードは次のとおりです。
simplemovie.mxml コンテンツをクリップボード コードにコピーします。

source="{Application.application.parameters.movi​​e}" />


:Application> ;
このシンプルな Flex プログラムは、ビデオを再生する VideoDisplay コンポーネントと、ビデオの再生が終了したらボタンをクリックして再度再生できる再生ボタンの 2 つの部分で構成されます。
VideoDisplay コンポーネントには、ビデオ FLV ファイルの URL アドレスを含む source 属性があります。ここで、その値は、HTML の タグまたは の FlashVars 属性によって提供されるプログラム変数です。
Flex Builder を使用して simplemovie.mxml を simplemovie.swf ファイルにコンパイルし、それを bin フォルダーから PHP ファイル ディレクトリに移動します。以下では、このビデオが埋め込まれた PHP ページを作成します。 ページのコードは次のとおりです。
simptest.php コンテンツをクリップボード コードにコピーします。
require "DB.php"; http://localhost:8080/movies/';

$dsn = 'mysql://root@localhost/movies';
$db =& DB::connect( $dsn ); ( $ db ) ) { die($db->getMessage()); }

$source = null;
$movieId = 1;
if ( array_key_exists( 'movie', $_GET ) )
$movieId = $ _GET[ '映画'];

$movies = array();
$res = $db->query( '映画から映画 ID、ソース、タイトルを選択' ); fetchrow( ) ) {
$movies []= $row;
if ( $row[0] == $movieId )
$source = $row[1]; }
if ( $source == null )
$ソース = $movies[0][1];

= "clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="400"
height="335"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/
swflash.cab">



width="400" height="335" play="true"
ループ = "false"
品質 = "高"
flashVars="movie="
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer ">



foreach( $movies as $movie ) {
?>

}
?>
上コードを作成すると、データベースに接続してビデオ リストを取得することから始まります。次に、URL 内の ID と一致するビデオ ID の検索を開始します。一致するビデオ ID があれば、その ID をムービー変数に割り当て、flashVars パラメータを通じて simplemovie.swf ファイルに渡します。
次に、HTML コード内に タグと タグを作成して、simplemovie.swf を埋め込みます。次に、利用可能なすべてのビデオのリストが作成され、このリストの各項目には、対応するビデオの正しい ID が提供され、このページへのリンクが提供されます。
このページをブラウザで実行した結果は、図 2 に示すとおりです。


図 2. シンプルなビデオ プレーヤーとビデオ リスト
ページを開くと、最初のビデオの再生が開始されます。右側のリストでビデオを選択すると、ページがリロードされ、選択したビデオが再生されます。

とても簡単なことではありませんか? Flex ファイル、PHP ファイル、さらにバックグラウンドでのちょっとしたデータベース操作、すごいですね。動画共有サイトが登場!
次に、ユーザー エクスペリエンスを向上させるために Flex でいくつかの作業を行います。




Flex インターフェイス、パート 1
Flex でビデオを再生したい場合は、Flex プログラムにビデオのリストを提供する必要があります。最も簡単な方法は XML を使用することです。そこで、PHP 部分に戻って、データベースからビデオのリストを XML ファイルに抽出できるページを作成する必要があります。 movie.php はこの関数を実装しており、コードは次のとおりです:
movie.php コンテンツをクリップボード コードにコピーします:
require "DB.php";

$moviebase = 'http://localhost:8080 / 映画/';

header( 'content-type: text/xml' );

$dsn = 'mysql://root@localhost/movies';
$db =& DB::connect( $dsn ) ;
if ( PEAR::isError( $db ) ) { die($db->getMessage()) }
$db-> query ( '映画からタイトル、ソース、サム、幅、高さを選択' );
while( $row = $res->fetchrow( ) ) {
<映画タイトル="" source=""
Thumb="" width=""
height="" />
< ; ?php
}
?>

コマンドラインから実行して、生成された XML を表示することも、ブラウザでこのページを開いて、ツリー形式で表示される XML を確認することもできます。 、図 3 を参照してください:


図 3. 動画の XML リスト
この XML リストを使用して、simplemovie.mxml を拡張する Flex プログラムを作成できます。コードは次のとおりです。
mytube1.mxml コンテンツをクリップボード コードにコピーします。





import mx.rpc.events.ResultEvent; mx .controls.VideoDisplay;
import mx.rpc.http.HTTPService;
import mx.collections.ArrayCollection;
プライベート var ムービー : ArrayCollection = new ArrayCollection();
public function onGetMovies(event : ResultEvent ) : void
{ var firstMovie : String =event.result.movi​​es.movi​​e[0].source.toString(); . movie.movi​​e;
movieList.selectedIndex = 0;

public function onPrevious() : void
{
if ( movieList.selectedIndex == 0 )
else
movieList . selectedIndex -= 1;
videoPlayer.source = this.movi​​eList.selectedItem.source.toString();

public function onPlay() : void
{
videoPlayer.source = this.movi​​eList.selectedItem.source.toString ( );
videoPlayer.play();
}

public function onNext() : void
{
if ( movieList.selectedIndex >= ( movie.length - 1 ) )
else
movieList .selectedIndex += 1;
videoPlayer.source = this.movi​​eList.selectedItem.source.toString();

public function onChange() : void
{
videoPlayer.source = this.movi​​eList.selectedItem.source. toString () }

;

: ボタン ラベル="<<" click="onPrevious()" />
VBox> dataProvider="{映画}"
labelField="title">
;


明らかな変更点は、インターフェイスの管理に使用される多くの ActionScript コードがページの上部に追加されたことです。このコードは、まず HTTPService を使用して、onGetMovies() で movie.php から XML を読み取ります。 HTTPService クラスが XML を検出すると、すぐに XML ドキュメント オブジェクト モデル (DOM) を返し、この DOM を使用して最初のビデオを読み取って再生できます。関数 onGetMovies() は、リスト ボックスに表示されるビデオを保存するムービー変数も設定します。 ActionScript コード内の他のメソッドは、ユーザーがビデオ リストをクリックしたり、「前へ」または「次へ」ボタンをクリックしたりするなど、インターフェイスによってトリガーされる可能性のあるさまざまなイベントを処理します。
一番下のコードは、ユーザー インターフェイスを構成するいくつかの Flex コンポーネントです。次のビデオまたは前のビデオに切り替えるためのボタン (左矢印と右矢印) がいくつかあります。 VideoDisplay の右側にビデオ リストがあり、リストにはビデオの名前のみがリストされます。
Flex を使用してプログラムをコンパイルして実行すると、結果が図 4 に示されます。


図 4. Flex ユーザー インターフェイスの最初のバージョン
これで、右側のリストを使用してビデオを選択したり、左/右ボタンを押してビデオを切り替えることができます。このプログラムはすでに非常に優れていますが、サムネイルはどこで使用されるのでしょうか?



Flex インターフェイス、パート 2??サムネイルの追加
リストでサムネイルを使用するには、サムネイルとタイトルの両方が表示されるようにリストを変更する必要があります。幸いなことに、Flex ではこれを簡単に行うことができます。まず、 タグを変更して itemRenderer を追加する必要があります。コードは次のとおりです。
mytube2.mxml コンテンツをクリップボード コードにコピーします。
...
dataProvider="{movies}"
change="onChange()"
itemRenderer="MovieItem">

...
この itemRenderer は MXML コンポーネントです。自分が作成したファイルで、そのファイル名は MovieItem である必要があります。メニューから [新規] > [MXML コンポーネント] を選択してファイルを作成し、次のコードを追加します。
MovieItem.mxml コンテンツをクリップボード コードにコピーします:


高さ="{data.height/3}" 回転="5" 左="10" トップ="0" />


自分のアイデアに従ってコンポーネントを配置できるように Canvas コンテナを使用しました。レイアウトに最適なコンテナを使用できます。次に、 タグを使用して画像を読み込み、 タグを使用してタイトルを表示しました。もう少し面白く見せるために、画像を少し回転させます。最終的な効果を図 5 に示します。
図 5. サムネイルを使用したリスト ボックスの拡張バージョン
この外観は特に優れているわけではありませんが、単純なテキスト リストよりもはるかに優れています。次に、ビデオの説明、実行時間、リンク、評価ボタンなど、必要なものをこのコンポーネントに追加できます。
ストレージと帯域幅
フロントエンド プログラムとデータベース操作のセットアップは比較的簡単ですが、ビデオ共有 Web サイトを構築するときに直面する問題はこれだけではありません。現在の主な問題は帯域幅です。これらのビデオは、コンパクトにエンコードされた Flash Video 形式であっても、非常に大きなファイルになります。帯域幅を使い果たさずにビデオ サービスを提供する方法は慎重に検討する価値があります。
もちろん、帯域幅の問題を解決する 1 つの方法は、より大規模な接続を購入するか、より良いブロードバンド条件を持つデータ センターにホストを配置することです。もう 1 つのオプションは、Web サイトをデータから分離し、ビデオ ファイルを別の場所に保存することです。 Amazon の S3 サービスは、比較的少額の料金で、スケーラブルかつスケーラブルな方法で大きなファイルを保存および共有するための簡単な方法を提供します。 S3 を使用して Web サイトにビデオ ファイルを保存すると、初期のインフラストラクチャ コストを大幅に節約でき、Web サイトがインフラストラクチャの費用を支払えるほど人気になるまで使用できます。
概要
Flash ビデオの出現とブロードバンドの普及により、低コストでビデオ共有 Web サイトを構築することはもはや夢ではありません。この例で、Flex/PHP を使用してビデオ共有 Web サイトを構築することがいかに簡単であるかを示し、さらに探索するきっかけになれば幸いです。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート