HTML5 Video with Fancybox

html video fancybox autoplay
Dan D picture Dan D · Nov 18, 2011 · Viewed 9.6k times · Source

I am having an issue with getting HTML5 video to autoplay on load into Fancybox. I have an HTML5 video loaded into a div that is hidden and therefore can't have autoplay enabled in the tag. I then call it one an image click with a Fancybox inline and a ref to the div. Everything works as it should except I just want the video to play when then Fancybox opens it?? Any ideas would be appreciated.

Answer

JFK picture JFK · Nov 20, 2011

You can autoplay the video as soon as it is opened in fancybox. The problem with the inline video is that if you close it then it will pause and the next time you open it in fancybox, the video will be open in the same place/track it was when closed ... and it won't "auto-resume" (the action is autoplay on start).

Anyway, this option should do the trick:

'onComplete': function(){
$("#myVideo").find('video').attr('autoplay','autoplay');
}

#myVideo is the ID of the DIV, which contains the video tag.

Since you are using the inline method, it would worth to have a look at one existing bug and its workaround here.

Eventually, you may prefer to use the API option 'content' instead, to avoid the inline type issues:

'content': '<video autoplay="autoplay" preload="none" poster="path/image.jpg" width="640" height="360" controls="controls"><source autoplay="autoplay" src="path/video.ogg" type="video/ogg">your browser does not support the HTML 5 video tag</video>'

Related questions

Autoplay HTML5 Videos in Fancybox

I'm working on a project that uses Fancybox to display single HTML5 Videos, as well as HTML5 video galleries. For the single videos, I'm looking to autoplay the video as soon as it's opened in Fancybox, and then close Fancybox …

Read More
Streaming via RTSP or RTP in HTML5

I'm building a web app that should play back an RTSP/RTP stream from a server http://lscube.org/projects/feng. Does the HTML5 video/audio tag support the rtsp or rtp? If not, what would the easiest solution be? …

Read More
HTML5 Video // Completely Hide Controls

How Could I completely hide HTML5 video controls? <video width="300" height="200" controls="false" autoplay="autoplay"> <source src="video/supercoolvideo.mp4" type="video/mp4" /> </video> false didn't work -- how is this done? Cheers.

Read More