VideoLoader - Have video play on button click

[gmagge]

Greetings all,

 

I've run into a problem with loadermax videoloader.

 

I have the video loading and can play it with no problem. My problem is that I cannot get it to play using a play button that is used in my project.

 

In the queueCompleteHandler below, I add a listener which works:

videoContent.addEventListener(MouseEvent.CLICK, _togglePause,false, 0, true);

This is clicking on the video itself to get it to play.

 

What I would like to do is have a mc which overlays the video take over the play actions:

 

 This fails miserably:

firstPlay.addEventListener(MouseEvent.CLICK, firstVidPlay);

My code:

function _queueCompleteHandler(event:LoaderEvent):void
{
    var video:VideoLoader = LoaderMax.getLoader("vid/u1a2p3.mp4");
    trace("duration:", video.duration);

    var videoContent:ContentDisplay = LoaderMax.getContent("vid/u1a2p3.mp4");
    videoContent.x = vidBG.x;
    videoContent.y = vidBG.y;
    videoContent.width = 512;
    videoContent.height = 288;
    videoContent.scaleMode = "proportionalInside";
    
    addChild(videoContent);
    addChild(firstPlay);
    videoContent.addEventListener(MouseEvent.CLICK, _togglePause,false, 0, true);
    firstPlay.addEventListener(MouseEvent.CLICK, firstVidPlay);
    
}

WORKS:
function _togglePause(event:MouseEvent):void
{
    var video:VideoLoader = VideoLoader(event.target.loader);
    video.videoPaused = ! video.videoPaused;
    video.playVideo();
    
}

DOES NOT WORK:
function firstVidPlay(event:MouseEvent):void
{
    
    var video:VideoLoader = VideoLoader(event.target.loader);
    video.videoPaused = ! video.videoPaused;
    video.playVideo();
    firstPlay.visible = false;
}

Any help will be appreciated. If this can be solved, then my scrubber woes should be solved as well.

 

Cheers!

[Carl]

When you run into problems, you can debug by adding a trace() where the code fails

 

function firstVidPlay(event:MouseEvent):void
{
    trace(event)
    trace(event.target)

    trace(event.target.loader)
    var video:VideoLoader = VideoLoader(event.target.loader);
    video.videoPaused = ! video.videoPaused;
    video.playVideo();
    firstPlay.visible = false;
}

You will see that the MouseEvent is not at all related to the VideoLoader you are trying to target.

 

To play your video, use the same code as you were using before

 

 

function firstVidPlay(event:MouseEvent):void
{
   var video:VideoLoader = VideoLoader(event.target.loader);
    video.videoPaused = ! video.videoPaused;
    video.playVideo();
    firstPlay.visible = false;
}

If you are playing multiple videos, you may want to have a global variable keep track of the current video like

var currentVideo:VideoLoader

//after your video loads do

currentVideo = LoaderMax.getLoader("vid/u1a2p3.mp4");

And then when you click your button use

 

function firstVidPlay(event:MouseEvent):void
{
   
    currentVideo.videoPaused = ! currentVideo.videoPaused;
    currentVideo.playVideo();
    firstPlay.visible = false;
}

any time your uses choses a new video just update the currentVideo value like

currentVideo = LoaderMax.getLoader("someOtherLoader"); 

Here is a zip of a tutorial about creating a video player that plays multiple videos.

Study content.html and the ActionScript source code. Its invaluable

http://greensock.com/forums-support-files/loaderMax-videoPlayer.zip

 

 

[gmagge]

Thanks Carl!

 

Appreciate the file and the help.

 

I used the currentVideo example you provided and it works great.

 

I'll be studying the file to figure out the scrubber issue.

 

Cheers! currentVideo