TAGS :Viewed: 13 - Published at: a few seconds ago

[ How to stop wistia video being played in a tab when navigating away from tab? ]


I have a jsp page with couple of tabs. One of the tabs has an embedded wistia video. When i navigate away from video tab to other tabs the video stops playing and works well in Firefox and Chrome but continues to play in IE.

I am trying to pause the video when the user navigates away from video tab. How can i achieve this using javascript? I cannot use jquery due to some conflicts on our site.

Below is the tab jsp code.

 <div id="tab_container">
    <div id="container_tabs">
     <div class="tabselected" id="tab_1" onclick="show(this);">Tab1</div>
     <div class="tab" id="tab_2" onclick="show(this);">Tab2</div>
     <div class="tab" id="tab_3" onclick="show(this);">Tab3</div>

    <div id="container_content">
      <div id="tabtest_1" style="display: block;">
        <dsp:include page="page1.jsp" />
      <div id="tabtest_2" style="display: none;">
        <dsp:include page="page2.jsp" />                  
      <div id="tabtest_3" style="display: none;">
        <dsp:include page="page3.jsp"/>

Any help is appreciated. Thanks.

Answer 1

Pausing when switching between tabs on a single page

First, I assume you are using an iframe embed type? API and SEO embed types should automatically detect "down" hidden states and stop themselves.

If you are using an iframe embed type, then simply adding the iframe API to the page should fix your issue. http://wistia.com/doc/iframe-api

This is because the iframe API will monitor the visibility state of your embed code, and "rebuild" when it changes from hidden to visible. Monitoring the state is not possible from inside the iframe, which is why it requires the iframe API.

Note that the solution above will not just pause the video, but reset it to the beginning. Changing the visibility of a flash object in IE is not well handled, so we're forced to rebuild when it comes up. To keep cross-browser uniformity, the other browsers behave the same way.

EDIT: I'm leaving this answer below because it's useful for pausing when switching browser tabs, even though that isn't the exact question.

This is a bit easier with jQuery because $(window).blur(function(){ ... }) is pretty reliable, but you can get it done with a little extra effort.

First, you need a cross-browser event binding function that deals with IE's window blurring idiosyncrasies:

var activeElement = document.activeElement;
function bindEvent(elem, eventName, fn) {
  if (elem.addEventListener) {
    elem.addEventListener(eventName, fn, false);
  } else if (elem.attachEvent) {
    if ((elem === window || elem === document) && eventName === "blur") {
      document.attachEvent("onfocusout", function() {
        if (activeElement === document.activeElement) {
          fn.call(window.event.srcElement, window.event);
        activeElement = document.activeElement;
    } else {
      elem.attachEvent("on" + event, function() {
        fn.call(window.event.srcElement, window.event);

The function above isn't perfect: the blur event will often fire multiple times in a row depending on what's in focus on the page. But it's workable.

Once you have that function, it's a simple matter of telling the Wistia embed to pause. If it's an "API" or "SEO" style embed (i.e. not an iframe) you can use this:

bindEvent(window, "blur", function() {

If it's an iframe style embed, then you can only accomplish this by adding the Wistia iframe API to the page, somewhere after the embed code. Once that's done, you can access the API through the iframe to pause it.

bindEvent(window, "blur", function() {

And more info on the regular javascript API: http://wistia.com/doc/player-api

I tested on Google Chrome and IE7-9, including in Quirks Mode.