When I bring this page up in my browser, I see something like Figure 2.

Figure 2. The simple movie player and the list of movies

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>

You can run that from the command line and see the XML. Or, you can point any modern browser at it and actually see the XML in a nice tree form, as shown in Figure 3.

Figure 3. The XML list of 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>

좀더 흥미로운 내용이 많이 있습니다.. HOME > O / S/Linux를 확인하세요

애드센스로 즐거운 블로깅 하세요 매일매일 늘어 가는 수익 즐거운 인터넷 세상입니다.
도움말을 오픈해 두시고 위의 [Google Adsense로 귀하의 ~~]를 클릭하셔서 가입을 진행하시면 됩니다.

그리고 더불어 간편하게 사진을 편집하는 Picasa, 불필요한 팝업없는 FireFox, Real player로 실시간 스포츠 관전, 요금 없는 Sky pe로 즐거운 통화등 구글 툴로 즐거운 컴생활을 즐기세요!!
일단 패키지를 설치해 보세요 컴퓨터 생활이 틀려집니다.