Pages

Wednesday, June 25, 2008

Flex embedded youtube player 1.1

A new version 1.2 is out click here, A few weeks ago I already made a blog about the flex embedded youtube player. This blog is about version 1.1. You can use this youtube player in your own website. You don't have to use a proxy or php script. You only has to update a xml with your own youtube video url's. This xml is loaded in a tree and just click on an entry. The selected video is shown in the video window.
Version 1.1 change list.
  • I now use a Tree for the movies overview so I know when a node is a branch and when it is a youtube movie.
  • Search your movies.
  • The player now supports bookmarks, you can add #video=101 to the page url and the player directly plays movie 101.
To let bookmarking work we have to add a css and javascript reference to the html page where the flash is embedded.
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!-- END Browser History required section -->
<!-- BEGIN Browser History required section -->
<script src="history/history.js" language="javascript"></script>
<!-- END Browser History required section -->

Here is a screenshot of the new player



For version 1.1 I had to change the xml. Every element has the name "node" and has to have the id and category attribute. Id is necessary for the bookmarking and category is necessary for the search and the label.

<node id="0" category="main">
<node id="0" category="own">
<node id="101" category="viper" url="http://www.youtube.com/v/ejlbNl3y5y8"/>
</node>
<node id="0" category="race">
<node id="0" category="European">
<node id="2012" category="Bauska 2008" url="http://www.youtube.com/v/c9BqEm7zxU4"/>
<node id="2010" category="autocross photo's" url="http://www.youtube.com/v/SMshJRp1YR8"/>
</node>
</node>
<node id="0" category="etc">
<node id="301" category="cross movie" url="http://www.youtube.com/v/VLlrpOUO3Qs"/>
</node>
</node>

Here is the source code of the new youtube player

16 comments:

  1. Excellent work. I really like the simplicity of it.

    ReplyDelete
  2. Hi.

    It seems that I need to retrieve the token for the youtube download first and then pass this to the get_video.php script.

    like this
    http://www.youtube.com/get_video.php?video_id=QNDt3bGi4GA&t=OEgsToPDskJzxr4efdP75GmNsyNlKV7t&fmt=5

    this will give me the token.
    http://www.youtube.com/get_video_info?video_id=QNDt3bGi4GA


    I will try to make an new example

    ReplyDelete
  3. Hi I made a patch it's working now.

    Please download the sourcecode again

    ReplyDelete
  4. Hi. I like your work and am trying your player 1.1 without much success. In the Flex Builder debug mode, it will play the videos but continuously displays a security violation error:

    *** Security Sandbox Violation ***
    SecurityDomain 'http://s.ytimg.com/yt/swf/cps-vfl70443.swf' tried to access incompatible context 'http://www.youtube.com/swf/l.swf?swf=http%3A//s.ytimg.com/yt/swf/cps-vfl70443.swf&video_id=c9BqEm7zxU4&rel=1&showsearch=1&eurl=&iurl=http%3A//i4.ytimg.com/vi/c9BqEm7zxU4/hqdefault.jpg&sk=80ZlUACeQZSrWBxxtCS2VnYzrYX4a_RKC&use_get_video_info=1&load_modules=1'
    Warning: Domain i4.ytimg.com does not specify a meta-policy. Applying default meta-policy 'master-only'. This configuration is deprecated. See http://www.adobe.com/go/strict_policy_files to fix this problem.

    A release build to localhost and my server both fail to show the videos at all. I seem unable to successfully debug the problem.

    I could use a suggestion or two if you have some time to help.

    Thank you,

    greg

    (I live in Seattle, a world away I would say.)

    ReplyDelete
  5. Hi , you are right.

    The loader can retrieve swf ,gif from every website. with this method I could retrieve the token from you tube. Now youtube changed there code, so I can't retrieve the token anymore

    so now I need to use other methods in flex (these methods has more security) and that's why you got a exception.

    You need to have a php script on your server ( where the swf is also located ) who's acts as a proxy. This script can get the token and pass it on to you.

    thanks Edwin

    ReplyDelete
  6. Edwin,

    Thank you for such a prompt and specific reply; many Bloggers are not so kind.

    I have used PHP scripts many times and recently used AMFphp with a Flex project. Would you have a working script that I could use as a starting point to get this going? ... I did not see one on your blog posts.

    Anyways, thank you again.

    Greg

    ReplyDelete
  7. Hi Greg,

    download the example zip again and you will have the new project with the php script.

    put the php script on your server and update the url variable in the project and it should work.

    thanks Edwin

    ReplyDelete
  8. Edwin,

    Again I thank you much. I shall download and check it out ASAP. In the meantime, I wrote a simple PHP proxy myself and integrated that, ... and it worked! Go figure. (We in Seattle are having a bad winter storm, so I have some extra time for such things today.)

    Anyway, the videos play from my server with a Flex Builder 3 release build, as they do from the debugger. But in the FB3 debugger I still get security warnings.

    To tell you the truth, I am way confused by the Flex/Flash security model(s) as are many still I am sure. I have read much on the subject but still, the whole picture has yet to come into focus for me; maybe some day soon I hope.

    Again, thanks for your time and effort. I will be trying your solution as soon as I am done with this post.

    Greg

    ReplyDelete
  9. Edwin,

    Well thanks again for your help. Your PHP proxy and AS3 mods indeed eliminate the Security Sandbox Violation. Mine did not. As your download not sets, it works perfectly out-of-the-box.

    Your work and your added help here were key to my success with this experiment; Thank You. I have much to learn yet from your youTube 1.1 example code.

    Greg

    ReplyDelete
  10. Hi Greg.

    Fine to hear you survived the storm and that my example works.

    Don't you need to use silverlight because you live in mickeysoft land.

    thanks Edwin

    ReplyDelete
  11. Hello again Edwin.

    Storm is still raging here in Seattle on this the day before Christmas. This is the most snow at this time of year since 1868. But all is well and the snow will surly melt into a memory some day to come. Meantime...

    I have a new problem that I thought I'd ask you about. First, your code works fine. I added it to a project using component ( http://www.fxcomponents.com/flex-video-player/ ) for video display: that too works fine. I added in a "Reflection" component ( http://blog.benstucki.net/?id=20 ) as "eye candy" and that too works fine; but only in the Flex Builder development environment. Local testing and remore server testing run into a security error # 2122 - Sand box issue. Argh!! Here it is:

    SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://www.gypsytrader.com/examples/Combined_Example1/Combined_Example1.swf cannot access http://www.fxcomponents.com/flash/flv/Babel_trailer.flv. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
    at flash.display::BitmapData/draw()
    at fx::Reflection/drawReflection()
    at views::MainUIView/__reflection_enterFrame()

    I have done much google'n but found no real solution for this type of use: youTube flv's.

    I thought that you might have some insight and potentially a solution for I do not.

    Thanks again,

    Greg

    ReplyDelete
  12. Hi Greg,

    the storm is good for project, you guys have a very white christmas. Here is it freezing with no snow.

    But it is a very nice flex program. I saw you try to load a image of youtube http://img.youtube.com/vi/qxw_cGWuRJU/default.jpg

    you tube should have a crossdomain.xml where they allow your website to download the images. This will not happen.

    Every code should use the php proxy. I see the pics in your player so I can only think there still some code which does not use the proxy.

    and with loader you can load code crossdomain but only swf and png files.

    ReplyDelete
  13. Hi, I downloaded the source code and I am trying to run it with the Flex Eclipse Launcher as it is - no changes at all. I am getting the error "Error: 1000: Unable to make connection to server or to find FLV on server." do you know where this is coming from ?.Tnx Elisheva

    ReplyDelete
  14. Hi

    Google changed late april the get_video.php script. The server which runs this script gets the token and this token is connected to the ip address of the server. So the flex client can't use this token. and the request is denied

    take a look at this http://labs.boulevart.be/index.php/2009/04/28/youtube-video-in-as3-flvplayback/

    I will try to make a fix

    ReplyDelete
  15. First thanks for a quick reply. It's kind of funny because I found your solution as I was trying to find out why my previous solution of working with youtube is not working any more...for the same reason. I will take a look at the site you suggested...hope this will work...until youtube next change at least. Elisheva

    ReplyDelete
  16. Hi,
    I made a new version which work perfectly with youtube, it uses javascript on the client side. http://biemond.blogspot.com/2009/12/flex-embedded-youtube-player-12.html

    thanks

    ReplyDelete