Videos inside tabs play at the same time in IE & Chrome

I'm using Simple Tabs w/ CSS & jQuery but I’m having issue with IE and Chrome.

I have videos in 3 different tabs; in IE and Chrome all tabs starting playing when pages load, but in Mozila Firefox it starts playing when you click on the tab. I want each tab to start working when someone click on it开发者_StackOverflow社区.

Can anyone please tell me how to fix this?

I think you should definitely explicitly send the start/stop actions to the video player when the tabs are activated/deactivated. It sounds like the video player is trying to be aware enough to start playing when it becomes visible (as happens in Firefox), but you shouldn't rely on it working everywhere.

You might be lucky enough that your video player has an APi which supports sending start/stop actions. If not, keep reading:

As a hacky solution, you could try setting the src attribute of the player iframe to the correct path when the tab is activated. I'd perhaps put the path into a link inside the frame, then, when the tab is activated, copy the href attribute of the link to the src attribute of the iframe. The browser should load the iframe and start the video.

When another tab is clicked, move the src attribute back to the link (leaving the iframe src blank. The video will be cleared.

This has the advantage of keeping a plain HTML link to the video accessible to search engines. It does have the drawback of clearing the timeline of the video though - though in a live-stream situation like yours, it's maybe not a problem.