Ahmed Nuaman


builder of internets ~ developer of dreams ~ tamer of Dachshunds

Papervision3D And The YouTube Player: Just Hack It

So after much attempts it seems the best way to get the YouTube player to play nicely with Papervision3D (and the other way too) is just to fake it!!

I basically create a “fake player” and use that in the plane, and then when the user has clicked on the plane, I overlay the player on top. I can’t wait for native 3D on FP10 to become more wide spread!

So here’s the code:

package
{
    import com.firestartermedia.lib.as3.display.component.video.YouTubePlayer;
    import com.firestartermedia.lib.as3.display.tools.ScaleObject;
    import com.firestartermedia.lib.as3.utils.DisplayObjectUtil;
   
    import flash.display.LoaderInfo;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
    import flash.system.Security;
   
    import gs.TweenLite;
    import gs.easing.Strong;
   
    import org.papervision3d.cameras.CameraType;
    import org.papervision3d.materials.MovieMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
   
    [SWF( width='580', height='400', frameRate='30', backgroundColor='#000000' )]
   
    public class App extends BasicView
    {
        [Embed( source='assets/img/yt_controls.jpg' )]
        private var ytControls:Class;
       
        private var videoId:String                              = 'i1Crvwldkcs';
       
        private var player:YouTubePlayer;
        private var plane:Plane;
       
        public function App()
        {
            super( 580, 400, true, true, CameraType.TARGET );
           
            Security.allowDomain( '*' );
            Security.allowDomain( 'www.youtube.com' );     
            Security.allowDomain( 'youtube.com' );     
            Security.allowDomain( 's.ytimg.com' );
            Security.allowDomain( 'i.ytimg.com' );
           
            Security.loadPolicyFile( 'http://img.youtube.com/crossdomain.xml' );
            Security.loadPolicyFile( 'http://gdata.youtube.com/crossdomain.xml' );
           
            init();
        }
       
        private function init():void
        {
            var mat:MovieMaterial;
            var controls:Sprite;
            var fakePlayer:Sprite;
           
            controls = new ScaleObject( new ytControls(), new Rectangle( 50, 10, 1, 1 ) );
           
            controls.width      = 400;
            controls.x          = 0;
            controls.y          = 300 - controls.height;
           
            fakePlayer = new Sprite();
           
            fakePlayer.addEventListener( MouseEvent.CLICK, handleFakePlayerClick );
           
            DisplayObjectUtil.loadMovie( 'http://i.ytimg.com/vi/' + videoId + '/hqdefault.jpg', fakePlayer, null, null, true );
           
            fakePlayer.addChild( controls );
           
            mat = new MovieMaterial( fakePlayer, true, true, true, new Rectangle( 0, 0, 400, 300 ) );
           
            mat.interactive     = true;
            mat.smooth          = true;
           
            plane = new Plane( mat, 400, 300, 3, 3 );
           
            plane.x     = 0;
            plane.y     = 0;
            plane.z     = -700;
           
            scene.addChild( plane );
           
            player = new YouTubePlayer();
           
            player.autoPlay         = true;
            player.playerHeight     = 345;
            player.playerWidth      = 460;
            player.wrapperURL       = ( LoaderInfo( loaderInfo ).parameters.url ||= 'assets/swf/YouTubePlayerWrapper.swf' );
            player.visible          = false;
            player.x                = ( stage.stageWidth / 2 ) - ( player.playerWidth / 2 );
            player.y                = ( stage.stageHeight / 2 ) - ( player.playerHeight / 2 );
           
            addChild( player );
           
            startRendering();
           
            addEventListener( Event.ENTER_FRAME, handleEnterFrame );  
        }
       
        private function handleFakePlayerClick(e:MouseEvent):void
        {
            removeEventListener( Event.ENTER_FRAME, handleEnterFrame );
           
            TweenLite.to( plane, 1, { rotationX: 0, rotationY: 0, ease: Strong.easeOut, onComplete: playVideo } );
        }
               
        private function handleEnterFrame(e:Event):void
        {
            TweenLite.to( plane, 1, { rotationX: stage.mouseX * .1, rotationY: stage.mouseY * .1, ease: Strong.easeOut } );
        }
       
        private function playVideo():void
        {
            stopRendering();
           
            TweenLite.to( player, 1, { autoAlpha: 1, ease: Strong.easeOut, onComplete: startVideo } );
        }
       
        private function startVideo():void
        {
            player.play( videoId );
        }
    }
}

And this is what we get:

Tell me what you think!

Where have comments gone?

Good question my old fruity. I'm now sticking any post discussions on Google+. Why? Well simply it's better. WordPress's comment system isn't very elegant and nor are ones like Disqus or Livefyre, so to save hassle I've just shipped them off to a social network, like a real boss.

Search

My social skills

Latest blog posts

  • Loading posts...

Subscribe in a reader

Latest tweets

  • Loading tweets...