CODEWITHSUNDEEP
jqueryflashvideohover
Emily P
Emily P

Reputation: 1

How to play movie clip on hover, pause when mouse leaves

I am going to be working on a site that has various mechanical products for sale. The customer wants me to make a model and movie of each product to show how the product works. Here is an example product:

Flash Clip

The problem I am having is, he wants the movie to only play when a user puts their mouse over the video. I attempted doing this with a mp4 file and it worked using jQuery, but only when in Chrome. Here is that link:

MP4 Clip

I want these demos to be viewable by the largest possible audience, so I was trying to stay away from Flash (also because I don't know Flash very well if at all). Does anyone know of a way to get this video to work in other browsers like in the second example? If not, how can I achieve that same idea using Flash?

Thanks for your help!

Emily

Upvotes: 0

Views: 4094

Answers (2)

jonshariat
jonshariat

Reputation: 176

In flash the code would be:

video1Wrapper.addEventListener(MouseEvent.MOUSE_OVER, playVideo1);

function playVideo1(event:MouseEvent):void
{
    video1.play();
}
video1Wrapper.addEventListener(MouseEvent.MOUSE_OUT, stopVideo1);

function stopVideo1(event:MouseEvent):void
{
    video1.gotoAndStop(1);
}

Upvotes: 2

zzzzBov
zzzzBov

Reputation: 179256

I'd suggest looking into HTML5 video with fallback: http://www.html5video.org/

Essentially you'll use the <video> element with a flash player inside it so that if a browser doesn't support video it'll still play the video in flash.

The KDP3 player looks to have a reasonable JavaScript api, so you should be able to control it from JS similarly to the video element.

Upvotes: 1

Related Questions