disabling play/pause in embedded video using JW player

14k views Asked by At

I am using JW (v 5.8) player to embed a video. And I want to do it so that autostart is enabled, allowing the video to start playing as soon as the page loads, the controlbar is disabled so that a viewer cannot seek to a random point in a video and the play/pause function on clicking the video is disabled. To embed the mp4 video, I am using JW player. I managed to accomplish the first 2 tasks, but to disable the play/pause function on clicking the screen, I am trying to use the clickproxy plugin and it does not work. I am pasting my code below:

<div id="mediaplayer">JW Player goes here</div>

<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">
    jwplayer('mediaplayer').setup({
        'flashplayer': 'player.swf',
        'file': 'video.mp4',
        'controlbar': 'none',
        'width': '1000',
        'height': '1000',
        'plugins': 'clickproxy',
        'clickproxy.listener': 'clickListener',
        'autostart': 'true'
    });
function clickListener(obj)
{
}
</script>

Right now with this code, the video loads, but doesn't even start playing, and clicking on the video doesn't do anything because of the clickproxy plugin. Anyway to accomplish what I want? I am a newbie in javascript, so any help will be really appreciated!

Thanks!

3

There are 3 answers

1
The Coder On BEST ANSWER

Ahhh yes, there used to be functionality in the player to do this (about ignoring the click) but it seems it keeps getting removed.

Here's the solution I've just implemented that works for me, I simply plug into the onPause javascript event and start the media playing again.

    <script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': '/jw/player.swf',
    'file': 'http://d3usowdy51yate.cloudfront.net/your-mp4-goes-here.mp4',
    'autostart': 'true',
    'icons': 'true',
    'stretching': 'fill',
    'controlbar': 'none',
    'width': '640',
    'height': '360',
    events: {
        onPause: function(event) {
          jwplayer('mediaspace').play();}
    }
  });
</script>
3
TheWiseG On

Try to put a transparent div over the player with the same dimension of the player.

4
Sindre Sorhus On

You can use the CSS property pointer-events on the #mediaplayer to prevent the click event to go trough to the video:

#mediaplayer {
    pointer-events: none;
}

You could also abuse the onPause event as a fallback for older browsers <IE9, by saying; play the video if the pause event is executed:

jwplayer('mediaplayer').setup({
    flashplayer: 'player.swf',
    file: 'video.mp4',
    controlbar: 'none',
    width: '1000',
    height: '1000',
    autostart: 'true',
    events: {
        onPause: function() {
            this.play(true);
        }
    }
});