Creating MyTube with Flex and PHP

Listen Print Discuss

Creating MyTube with Flex and PHP
Pages: 1, 2, 3, 4

The big change is the addition of all the ActionScript code at the top of the file. This code manages the interface. It first reads in the XML from the movies.php page using the HTTPService mechanism in the onGetMovies() function. The HTTPService class is smart enough to recognize XML when it sees it and immediately gives back an XML Document Object Model (DOM) that you then use to get the first movie and start it playing. The onGetMovies() method also sets up the local movies variable for the list box to display. The other methods in the ActionScript handle the different events from the interface, the user clicking the list of movies, using the Next or Previous buttons, and so on.

On the bottom of the file are the Flex objects that comprise the user interface. There are a few more buttons—the left and right arrows—that move to the next and previous movies. A list of movies appears on the right side of the video display; in this case, the list just shows the title of the movie.

When I use Flex Builder to compile and run the application, I see what appears in Figure 4 in my browser.

Figure 4. The first version of the Flex user interface

I can use the list on the right to select a movie, or press the left and right buttons to navigate from movie to movie. Now that's pretty nice, but what about the thumbnails you have?

The Flex Interface, Part 2—Now with Thumbnails

To use the thumbnails in the list, you need to change the list so that it displays both the thumbnail and the title of the image. Thankfully, Flex makes this so simple it's almost sinful. Start by altering the <List> tag to add an itemRenderer. This is shown in Listing 8.

Listing 8. mytube2.mxml

...
  <mx:List width="100%" height="340" id="movieList"
    dataProvider="{movies}"
    change="onChange()"
    itemRenderer="MovieItem"></mx:List>
...

That item renderer is an MXML component that you must create called MovieItem. You create that by first selecting the New > MXML Component, then putting the component into the code from Listing 9.

Listing 9. MovieItem.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="80">
  <mx:Image source="{data.thumb}" width="{data.width/3}"
     height="{data.height/3}" rotation="5" left="10" top="0" />
   <mx:Label text="{data.title}" fontWeight="bold" top="10" left="100" fontSize="18" />
</mx:Canvas>

I used a Canvas container so that I can position the elements around myself. You can use whatever container makes the most sense for your layout. Then, use an <mx:Image> tag for the image and an <mx:label> tag for the title. To make it a bit more interesting, rotate the image slightly. The end effect is shown in Figure 5.

Figure 5. The upgraded list box with the thumbnails

Okay, it's not the most amazing thing in the world, but it's cooler than just a text list. And you can make the component as complex as you like by adding descriptions, running times, links, rating buttons, or whatever else you like.

Storage and Bandwidth

While putting together the database and the frontend is relatively easy, it's not the only problem that you face when setting up a video sharing site. The primary, ongoing problem is bandwidth. Movies, even with the tight encoding of Flash video, are still rather large files. Figuring out how to serve up video without breaking the bank on bandwidth charges can be interesting.

Certainly, one bandwidth solution is to buy a bigger connection or get into a hosted data center with a fat pipe to the Internet. Another option is to have your sharing site hold references to the data but store and host the video files somewhere else. Along that line, Amazon's S3 service provides an easy way to store and share large files in a redundant and scalable way while paying fairly little money for the service. Using S3 to host the video in the early phases of the site can keep you from paying a lot of infrastructure costs early on, holding off on those expenses until the site is popular enough to pay for its own infrastructure.

Conclusion

With the introduction of Flash video and the ubiquity of broadband access, it's now conceivable to run a video sharing site on a budget. Hopefully, this example shows you how easy it is to get a Flex/PHP video sharing solution together and will motivate you to take it even further.

This article was produced with funding provided by Adobe Corporation

Jack Herrington is an engineer, author and presenter who lives and works in the Bay Area. His mission is to expose his fellow engineers to new technologies. That covers a broad spectrum, from demonstrating programs that write other programs in the book Code Generation in Action. Providing techniques for building customer centered web sites in PHP Hacks. All the way writing a how-to on audio blogging called Podcasting Hacks.

Return to ONJava.com.

Do you want to write rich browser applications? Would you consider using a tool like Flex to deliver it?
You must be logged in to the O'Reilly Network to post a talkback.

Showing messages 1 through 33 of 33.

Automatically looping...
2008-12-04 01:22:31 andyjenn [Reply | View]

Thanks Jack - awesome tutorial!! However, in the Flex application, my videos are automatically playing and looping through the list, playing each one...?
Is there something obvious I can do to have them play only when they're selected?
Will have a rummage around and post if I find anything...

error.
2008-06-18 16:06:27 Psiico [Reply | View]

hi i've folowed this tutorial but when i try to add the list in Flex, to show the videos it return this error when open in browser.

error:
TypeError: Error #1010: A term is undefined and has no properties.
at PlayerTv_flex/onGetMovies()[D:\Documents and Settings\Psiico\My Documents\Flex Builder 3\PlayerTv\src\PlayerTv_flex.mxml:31]
at PlayerTv_flex/__movieXmlData_result()[D:\Documents and Settings\Psiico\My Documents\Flex Builder 3\PlayerTv\src\PlayerTv_flex.mxml:4]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.rpc.http.mxml::HTTPService/http://www.adobe.com/2006/flex/mx/internal::dispatchRpcEvent()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\http\mxml\HTTPService.as:275]
at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::resultHandler()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\AbstractInvoker.as:191]
at mx.rpc::Responder/result()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\Responder.as:41]
at mx.rpc::AsyncRequest/acknowledge()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\AsyncRequest.as:74]
at DirectHTTPMessageResponder/completeHandler()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\messaging\channels\DirectHTTPChannel.as:381]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

any fix? please!

thank you.

Problem
2008-06-08 08:05:06 rathour [Reply | View]

I get the same message as other users. And how do i use pear DB and ffmpeg ?

Need Help
2008-05-19 13:42:40 jmsbndnblck112 [Reply | View]

can i please have help with this error message

Warning: unlink(moviez\Video1.flv) [function.unlink]: No such file or directory in /Users/oladoke/Sites/upload.php on line 10

Warning: unlink(moviez\Video1.gif) [function.unlink]: No such file or directory in /Users/oladoke/Sites/upload.php on line 16
DB Error: not found

i have installed the DB and PEAR. i have also checked permissions

does anybody also know any flex,php and mysql Pros who build website for a fee?

Need Help
2008-05-22 00:52:25 mani8php [Reply | View]

No need of pear...

1.unlink error
You check by using the file exist function...ie..like given below on both places ok..

if(file_exists($out))
{
unlink( $out );
}

2.Neglet the pear connection and use php db connection..

Help me
2008-05-04 06:13:00 cypus [Reply | View]

excute addmovie.html, and see this result below.

Warning: unlink(movies$flvpath) [function.unlink]: No such file or directory in /home/htdocs/movies/upload.php on line 7

Warning: unlink(movies$thumbpath) [function.unlink]: No such file or directory in /home/htdocs/movies/upload.php on line 16

Fatal error: Class 'DB' not found in /home/htdocs/movies/upload.php on line 33

I don't understand what does that mean...
and I can't not make DB.php file.

need solution, plz~

Need Solution plz..
2008-04-23 06:46:07 mani8php [Reply | View]

Warning: unlink(movies\robot64109.flv) [function.unlink]: No such file or directory in C:\wamp\www\check\flashvideo_4\upload.php on line 6

Warning: unlink(movies\robot64109.gif) [function.unlink]: No such file or directory in C:\wamp\www\check\flashvideo_4\upload.php on line 15

Fatal error: Class 'DB' not found in C:\wamp\www\check\flashvideo_4\upload.php on line 32

I Have faced these kind of errors..while click upload button...plz tell me how to retify it....

Need Solution plz..
2008-04-24 09:56:37 Jack Herrington | [Reply | View]

You need to install DB with:

pear install DB

As for the other problems you need to check file permissions on the upload directories and make sure that you have ffmpeg installed correctly.

Black screen
2008-04-20 15:38:14 Could you help me? [Reply | View]

Hi,I think this is a great tutorial but i have some problems...

I've sucessfully uploaded the videos to my database but when i play the simptest.php file on my browser, the video player seams to load but then it turns black, and if i click on the play button nothing happens...

I'd appreciate if someone can help me, thanks.

Get figure out where the upload path is
2008-04-15 13:22:27 XtremeCamera [Reply | View]

I have a linux server running CentOS... I worked your tutorial down to the letter and everything works, including the flex app, writing to the DB, everything... except for the life of me I cannot figure WHERE the upload path, what it should be, or how to set it. I can go through the upload process, I get a successful upload message, I can see the title in simpletest.php and simplemovie.html, but there is no movie. Looking at the directory I thought I specified there are no movies, no fla files, no swf... nothing...

Please, which file, which line, and if needed, any changes I have to make in the PHP for a linux server?

Oh, and this might sound stupid, but since the server I own is being handled remotely I am using the actual URL/movies and not localhost, despite making the DB with the terminal and successfully using root@localhost as the DB connect name... Am I correct with this?

Thank you for any help anyone can supply.. I'd really like to get this script working.

similar error to others...
2008-04-03 18:32:41 KRiSX [Reply | View]

when trying to upload a movie... all i get is this...

Warning: unlink(movies\.flv) [function.unlink]: No such file or directory in C:\wamp\www\MyTube\upload.php on line 7

Warning: unlink(movies\.gif) [function.unlink]: No such file or directory in C:\wamp\www\MyTube\upload.php on line 16
File sucessfully uploaded

any ideas?

similar error to others...
2008-04-20 15:48:56 Could you help me? [Reply | View]

I had the same problem and i found that if i changed the global variables of PHP on mi php.ini to ON it worked, but i don't know if that's OK

The "other" back end
2008-03-09 10:32:42 Chaos7703 [Reply | View]

Howdy, I really think this tutorial is great and I like the whole 'tweaked' thumbnails look. However, the Flex & PHP I don't really need help with (I might with the PHP once I get my actual problem solved). I found this article while I was writing my upload script which is called/used from within my Flex app. I book marked this article because I knew that once the people could do the uploading, I needed a way for them to view uploaded content, but as we know Flash/Flex only plays swf & flv files. As far as I know most people can't generate or convert to flv's. Hence where this page came in. I need a way to convert everyone's *.* videos into *.flv (*.* -> *.mp3 would be helpful for pods also).

Alas, I *think* I figured out what to download from the MPlayer site, but everything I've read implies that it's a desktop app. for me to watch/convert videos on my computer.

I see the PHP scripts for converting videos & generating thumbs, but I don't have a clue how to get to that point. What files do I need to move to the server, and what do I do with them once they're there? I already have my directory structure in place & working and my Db tables track the files that go in the folders. So I don't want to change any of that, just the file formats.

Thanks!! Great work!

solve this problem
2008-02-04 03:29:05 edwindew [Reply | View]

Warning: unlink(movies\Caddick_s_Six(1).flv) [function.unlink]: No such file or directory in C:\xampp\htdocs\youtube\upload.php on line 7

Warning: unlink(movies\Caddick_s_Six(1).gif) [function.unlink]: No such file or directory in C:\xampp\htdocs\youtube\upload.php on line 16
File sucessfully uploaded

Also i need simplemovie.swf file

Having problems...
2008-01-22 17:44:33 bigtiger [Reply | View]

Hi... I am tring to create a page for a site for someone, but there is a problem when I'm testing it...

Warning: unlink(movies\.flv) [function.unlink]: No such file or directory in H:\xampp\htdocs\Video\test_page\CFLAR_Video\upload.php on line 7

Warning: unlink(movies\.gif) [function.unlink]: No such file or directory in H:\xampp\htdocs\Video\test_page\CFLAR_Video\upload.php on line 16

Fatal error: Class 'DB' not found in H:\xampp\htdocs\Video\test_page\CFLAR_Video\upload.php on line 33

(This is a windows server, which I will soon upload to a unix server.)

e-mail me: bjwalden898_16@msn.com if you can help... Thanks.

Having problems...
2008-01-22 20:19:10 Jack Herrington | [Reply | View]

The unlink problem is an issue with the permissions on your upload directory.

The DB.php file is available from PEAR. Use this to install it

pear install DB

From the command line.

Having problems...
2008-01-23 13:06:54 bigtiger [Reply | View]

Well... Thats the unix command... I am testing this on windows first... I also made a file named DB.php

Having problems...
2008-01-23 13:41:45 Jack Herrington | [Reply | View]

Same thing works on my Windows install of PHP when I have my path set to the bin directory of the PHP install.

Having problems...
2008-01-23 14:21:01 bigtiger [Reply | View]

hm... Well the web server I have is Apache (bundles with MySQL, PHP, Perl, and more.)

But nothing still works.

Having problems...
2008-01-23 14:27:32 Jack Herrington | [Reply | View]

What exactly are you seeing when you say that 'nothing works'.

Having problems...
2008-01-23 14:45:15 bigtiger [Reply | View]

Warning: unlink(movies\CFLAR.flv) [function.unlink]: No such file or directory in H:\xampp\htdocs\Video\test_page\CFLAR_Video\upload.php on line 7

Warning: unlink(movies\CFLAR.gif) [function.unlink]: No such file or directory in H:\xampp\htdocs\Video\test_page\CFLAR_Video\upload.php on line 16
DB Error: connect failed

If you like you can do a test: http://quadirc.gotdns.com/video/test_page/CFLAR_Video/addmovie.html

Having problems...
2008-01-23 14:53:10 Jack Herrington | [Reply | View]

So are there files in the movies directory?

Also, it sound like the DB PEAR module is working, but now there is no database to connect to. Have you set up MySQL and added in the tables and such?

Having problems...
2008-01-23 15:07:33 bigtiger [Reply | View]

Yea, I created it through PHPMyAdmin... and created the movies.sql file in the database folder.

Having problems...
2008-01-23 15:09:49 Jack Herrington | [Reply | View]

What database folder? Movies.sql is supposed to be used to initialize the database tables.

Having problems...
2008-01-23 15:15:23 bigtiger [Reply | View]

the database folder is: movies. The movies.sql file is in side of that folder in the MySQL server.

Having problems...
2008-01-23 15:17:36 Jack Herrington | [Reply | View]

Yeah, that's not going to work. Could you email me directly at jherr at pobox dot com and I'll see what I can do to help you out.

Having problems...
2008-04-19 04:58:00 Guitaristka [Reply | View]

Created on instructions all file:
http://www.onlamp.com/pub/a/php/2007/05/24/creating-mytube-with-flex-and-php.html?page=1
The Mistake:
Warning: unlink(movies\spider.flv) [function.unlink]: No such file or directory in /home/public_html/movies/upload.php on line 7

Warning: unlink(movies\spider.gif) [function.unlink]: No such file or directory in /home/public_html/movies/upload.php on line 16

Fatal error: Undefined class name 'db' in /home/public_html/movies/upload.php on line 33

1. Where it is necessary to place file ffmpeg.c
2. We Ask to bring listings of the file DB.php - that there?

Having problems...
2008-06-12 20:24:06 swotec [Reply | View]

unlink($out); => if(file_exists($out)){unlink($out);}

$dsn = 'mysql://user:password@host/datebase';

Make sure both pear and pear-DB installed.

hello.
2007-10-07 18:08:27 quaker [Reply | View]

this is something that i have been looking for a long time does any one got a download of the complete files needed to use this on a website. IM working on a video mod for my localhost server.

Q

Example
2007-09-23 11:24:54 redesignme [Reply | View]

The website http://www.redesignme.org was made possible because of this excellent article.

Thanks again Jack!

-Maxim

Thanks
2007-08-14 13:55:28 glodde [Reply | View]

This article was helpful in creating www.justwatchvideos.com

Same tutorial but using python and turbogears and flex
2007-06-20 05:08:21 alaas [Reply | View]

If anybody is interested, i re-created this tutorial using python and turbogears and flex instead of php.
You can find the tutorial at http://codedemigod.com/tutorials

DEMO APP (open source)
2007-06-02 07:31:41 rohanpinto [Reply | View]

I am in the process of building a flex based video sharing app which does exactly this... including moving the files to amazon's S3. the demo is at http://demo.rohanpinto.com. I shall be releasing the entire app as opensource code and make it available for download soon.

the difference with this app and the approach you have mentioned is that I use HTTPService to procure the videos and SWFObject to display the video..

I also have included a youtiube video indexing scripe which allows for indexing / bookmarking all youtube videos too...

I bet there would be tons of video sharing apps in flex that would pop up, but this "open source" app I promise would be the "best"... as all i concentrate on is the functionality and not the look and feel, I shall "seek" help from other flex developers to build themes an have runtime CSS's that can be imported into the app...

BTW: I'm a flex newbie and have gotten from learning flex from ground zero to developing the app as it stands in the demo page in less than 7 days (ah !... not to forget the time i spent on my day-job in those 7 days)