Pause the Flow-player once a JavaScript function is called.

Question

I am using flowplayer to display videos in my project. I am using the following code:

<a href="<?php echo base_url()?>secure/<?php echo $videos->videolink?>" class="fplayer" id="flowplayer">
</a>

<script>
$(document).ready(function()
    {
        $('div[id^="overlay_form"]').css({ 

            left: ($(window).width() - $('div[id^="overlay_form"]').width()) / 2,
            top: ($(window).width() - $('div[id^="overlay_form"]').width()) / 7,
            position:'fixed'
            });

});
</script>
<script>

$f("flowplayer", "<?php echo base_url()?>js/flowplayer-3.2.18.swf", {
  clip: {

    autoPlay : "true",
    autoBuffering : "true",
    onStart: function() {

          //msgs.innerHTML += "Common Clip event listener called\n";
          return true;
      },

      onPause: function() {
          //msgs.innerHTML = "Paused";
      },

      onResume: function() {
          resumingvideo();
      }
  },

  });
</script>

and it is working fine. I have a span which will display a popup and the function for it is

function showpop(id)
{
    $("#overlay_form"+id).fadeIn(1000);
}

CSS for the popup:

div[id^="overlay_form"]{
position: absolute;
border: 5px solid #79BAEC;
border-radius:5px;
padding: 10px;
background: white;
width: 270px;
height: 180px;
}

While this popup is coming, it is getting displayed at the back of the videoplayer since the video is getting played like shown in the image below.

Once the video is paused, the popup will come in the correct place. So is there any way to show the popup while playing the video and also what should I do to pause the video once showpop() function is called ? I want the popup to be come like shown below:

Can anyone help me to do this ? Thanks in advance.

Answer 1

1.

For the popup try setting the wmode to opaque. This will allow the player to respect z-indexes.

Example taken from flowplayer site

flowplayer("player", {
    src:"http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",
    wmode: "opaque" // This allows the HTML to hide the flash content
    }, {
    clip: {
      url: 'http://stream.flowplayer.org/flowplayer-700.flv'
    }
});

For more detailed info see the flowplayer wmode demo

2.

To pause the video you should be able to do something like this in your showpop function.

$f("player").pause();

See player docs for more info on this.