using the player in a modal window

16 replies [Last post]

Posted: Thu, 2009-03-12 11:46 lior

Hi,

i am using the JWPlayer ...Hi,

i am using the JWPlayer in a modal window (when someone clicks the thumnbnail of a video, i am opening a modal window with the JWPlayer).

it works gr8 in Firefox and in Chrome, but it fails to load the video and the skin in IE7 (it displays the player native skin, fails to display a required skin nor the video itself and its thumbnail).

i am using jquery and a pluging that mimics lightbox for the modal window.

if i am using the the code to display the video in the original html page, it displays fine.

any suggestions?

regards,

lior

Posted: Sun, 2009-10-11 16:41 Other

Hello lior,

Same problem here. Did you find the solution? If not, just bumping...

It seems that with the embed element IE works ok in a modal window but not with object or swfobject.

Posted: Wed, 2009-10-21 11:42 Other

"It seems that with the embed element IE works ok in a modal window but not with object or swfobject."

Hum, even that does not seem to be true. Object works but only if [paste your solution here].

Posted: Fri, 2009-10-23 07:30 Zachary Ozer

What type of modal window are you opening? Flash? JavaScript?

Posted: Tue, 2009-10-27 14:28 Scott

I'm having similar issues. I'm using ASP.NET AjaxControlToolkit ModalPopupExtender to display the modal dialog. In FF the playerReady function seems to fire immediately as the flash player becomes visible on the UI (not when the page loads). In IE, however, the playerReady function is never firing. Anyone else know how to resolve this? I'm using SwfObject to embed the player. As a point of clarification, the player is displaying fine visually in IE its just the JavaScript API seems to be broken.

Posted: Tue, 2009-10-27 15:03 Scott

Also...about a year ago (forget which version of JW Player I had at the time), I was able to get it working in a modal but injecting the player into the modal everytime it was displayed versus having on there and just hiding the modal. This was a really crappy solution in my opinion but I got it working. I recently moved from ASP to ASP.NET and was attempting to get it working without dynamically rebuilding everything but still seems to be a no-go.

Posted: Wed, 2009-10-28 19:26 Zachary Ozer

Scott - it's hard to know why it's not firing in IE. Can you post a link to an example page?

Posted: Mon, 2010-02-01 13:21 Stephen Watkins

Any news on this situation? I have some customers who claim they cannot see any of the videos.

Here is the link: http://jetreports.com/row/mediacenter/4/

Any help would be greatly appreciated.

Posted: Mon, 2010-02-01 14:35 Ethan LongTail

Hi,

Your issue is that your LightBox is just loading links to the FLVs in IE. I would use our own JW Box instead - http://www.longtailvideo.com/support/tutorials/JW-Player-Lightbox

Best,
-Ethan

Posted: Sun, 2010-12-05 15:16 whispers

I am looking for a bit of HAND HOLDING here (please)..

I want to use lightbox or anything along with the JW Player... (or whatever works best)

Heres what I need..maybe someone can point me in the right direction?

1.) Needs to be MODAL (ie: layered above the main content in a window)
2.) Needs to play videos (as well as .flv's)

I will be triggering the modal window/player from within a FLASH..

and I can not for the life of me..get it working?

Either everything needs to be embedded into the HTML page (YUK)..
needs some additional player added (like JW player) somehow?

with all the clones..dead projects.. lack of support... integrated players.. Im truly in need of some help/direction?

I understand you basically put some files/folders in your directory where the .swf is..

In the container HTML page:

include whatever files are required for that 'lightbox clone'..

link to the CSS file

add some javascript function that triggers the lightbox 'effect'..

In Flash:

I use either a getURL() action to call some javascript in the container page..

Use an ExternalInterface() method to do the same..

(Im not sure which is better? or if it even matters)

anybody got some help for a noob here?

Thanks

Posted: Mon, 2010-12-06 00:36 Ethan LongTail

Tutorial - http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v4/21/jw-box-the-jw-player-lightb...

Posted: Fri, 2011-04-29 16:35 Dave P

"NOTE: JW Box is no longer being actively maintained by LongTail Video, and is now a deprecated product. As such, we will not be providing support for issues relating to JW Box."

Any non-deprecated solutions to this issue? Seems that using a jquery modal dialog with jwplayer for popup videos should be a no-brainer.

At one point we had this working by simply recreating the player within the jquery dialog every time the "source" changed. Kludgy, but it worked. However, after upgrading to 5.5 we're having all manner of problems that manifest in various ways depending on what we try and which browser is tested. Problems include everything from audio-only with blank video, to javascript errors in the jwplayer js libs...

Ideally, something like the following should work (dialog and jwplayer setup not shown, but is pretty straight forward and performed on document ready):

<div id="videoDialog" class="videoDialog">
    <div id="videoPlayer" class="videoPlayer"></div>
</div>

    $("a.videoLink").click(function () {
        jwplayer("videoPlayer").load($(this).attr("href"));
        $(videoDialog)
            .dialog("option", "title", ($(this).attr("title") ? $(this).attr("title") : ""))
            .dialog("open");
        return false;
    });

The results seem to vary based on how we set the wmode, too. Puzzling...

Dave

Posted: Fri, 2011-04-29 16:57 Ethan LongTail

Sorry, we don't have any work-arounds at the moment.

Posted: Fri, 2011-04-29 19:07 Dave P

Thank you, Ethan.

Just so we clearly understand your response: 1) there is no workaround for using a jquery modal dialog with jwplayer and 2) the only option previously offered was JW Box, which LongTail has deprecated.

Can we then infer that there is currently no supported solution for implementing popup videos using jwplayer (short of forcing a new browser window)?

Certainly we can individually develop our own solutions to what would seem to be an extremely common use-case, which sort of defeats the purpose of investing in such libraries. In any case, can someone at least provide a clear understanding of the reasons jwplayer doesn't work with the most--if not all--"standard" popup libraries". If we're left to "roll our own", were really not in any better position than the authors of the standard/well-established popup libraries... not a good feeling for those of us that are commercial license customers...

Thanks for your response!
Dave

Posted: Fri, 2011-04-29 19:29 Ethan LongTail

We are planning on writing an update to the JW Box in the future, but right now 1) Yes we do not have any official work-around,and 2) Yes, the JW Box is deprecated.

You can always write your own though or use other pre-built lightboxes and modify them. I have used GreyBox in the past and hacked it up a bit and gotten the JW Player to work in it.

Posted: Sat, 2011-04-30 04:09 tweedledum

Deprecated or not, the JW Box still works with the v5.6 player.

See this Test Page: http://willswonders.myip.org:8088/HTML5/RockBrookCamp.html

#1 JW Player in a Shadowbox

#2 no box — JW HTML5 Player

#3 JW Player in a JW Box

Worst case, make your own "Box". Just place a semi-transparent layer over the HTML content, then place the JW Player on top of the semi-transparent layer. Voilà! You have a "Box".

It's quite easy; I've done it many times, with many variants. It's actually easier than implementing one of the "Box" libraries, and much more flexible.

Posted: Wed, 2011-05-11 11:39 Anthony W

I have this script working below (jquery dialog). The parameter that fixed it for me is when I turn autostart:false on the video.

<div id="democontainer">
        <div id="videocontainer">Loading the player...</div>
</div>
$("#democontainer").dialog({
            bgiframe: true,
            autoOpen: false,
            modal: true,
            zIndex: 3999,
            show: 'clip',
            hide: 'clip',
            resizable: false,
            title: '', closeText: 'close', width: 698, height: 418,
            open: function(event, ui) {
                jwplayer("videocontainer").setup({
                    flashplayer: jwplayer/player.swf",
                    file: "video.mp4",
                    width: 640,
                    height: 360,
                    autostart: false,
                    image: "video.jpg",
                    events: {
                        onPlay: function(event) {
                            _gaq.push(['_trackEvent', 'Videos', 'Play', "video.mp4"]);
                        }
                    }
                });
            },
            close: function(event, ui) {
                jwplayer("videocontainer").remove();
            }
        });

using the player in a modal window

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company