GXT/GWT html content reloads when switching tabs

I a开发者_开发技巧m working on a GXT/GWT project. I have two tabs in which content is set based on selections from a drop down menu. The content in one tab is an embedded video (Google Video or youtube video)

The problem is that when switching tabs, the video reloads and starts from the beginning again. What I would like is to be able to switch tabs and have the video continue to play or pause when the focus switches to another tab.

Any ideas, as always, are greatly appreciated.

Cheers, Ben

I'm agree with @mmohab. It's iFrame's behavior and doesn't related to flash. Reload problem will solve by using Gxt's HtmlContainer class and setUrl() method instead of using TabItem or ContentPanel's setUrl method. HtmlContainer wraps your given Html or Url page body's to Div tag and not iFrame:

HtmlContainer html = new HtmlContainer("www.youtube.com");
yourTabItemObj.add(html);

That's because you are using an IFRAME for embedding, IFRAME must reload when its position or size changes. This is done in Firefox, However IE doesn't reload the IFRAME when its position or size changes.

Google video uses flash, and when you switch to another tab,it gets removed from the DOM, and Flash will have to reload when you switch back. you might be able to create a custom widget for the player that reparents it and sets either the display or the visibility CSS attributes of the dom element.

There are diff behaviors of this problem in diff browsers.

For FF, if you switch from one tab to another it will reload the flash content. The reason is that, if you switch from one tab to other then the deselected tab "display" property being change to "none" and when you again come back to that tab "display" property will be changed to "block". This is the root cause of this issue in FF.

In IE you wont get this issue.

Solution:

.templateTabItem {position: absolute !important;} //css

    TabItem item = new TabItem();
    if (!GXT.isIE && !GXT.isIE8 && !GXT.isIE9) {
        item.setHideMode(HideMode.VISIBILITY);
        item.addStyleName("templateTabItem");
    }