0

Im trying to implement the latest fancybox (5.8.2011) that loads a video from our server using jwplayer. Unfortunately the fancybox website is quite bare and doesnt give a lot of informtation. So far here is my code:

HTML:

<div class="vidHolder">
        <a href="HTTP://myserver.com/images/pathtofile/test_640.mp4"
            class="fboxVid">
            <img src="Assets/img/preview.jpg" alt="" />
        </a>
    </div>

javascript:

$(document).ready(function () {
    $('.fboxVid').click(function () {
        $.fancybox({
            'title': this.title,
            'content': '<embed src="player.swf?file=' + this.href + '&amp;autostart=true&amp;" type="application/x-shockwave-flash" width="352" height="240" wmode="opaque" allowfullscreen="true" allowscriptaccess="always"></embed>'
        }); // fancybox
        return false;
    }); // click
}); // ready

In a nutshell, the window opens up and loads the flash player but the video doesnt play.

I get the feeling that its because I havent loaded the settings for jwplayer correctly but Im not sure how to go about this. For those who are interested my player swf file is in the document root (however, Im not seeing it with either firebug or chrome developer tools).

Thanks

Peter Scott
  • 184
  • 2
  • 3
  • 21

1 Answers1

0

You can refer to the following answer to the similar question to load the video in the fancybox.

play flv in html

With video.js its very easy........ You can use other video formats using video.js all you need to change is

<source src="..." type="video/mp4">

Moreover, there might some issues regarding your browser, does your browser support the .mp4 format, I could not play .mp4 in chrome, but it works fine in firefox. Try adding more sources with same video in different formats. Like...

<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
<source src="video1.webm" type="video/webm">
Community
  • 1
  • 1
thegauraw
  • 5,428
  • 2
  • 21
  • 14