JW Player - Stop (target) Multiple Players with an Event Handler

Question

JW Player - Stop (target) Multiple Players with an Event Handler

2.2k Views Asked by Jonca33 At 04 April 2025 at 05:40

I have a click handler to fire the built in jwplayer().stop(); functionality. However only my first handler executes and the other one fails (but no errors are logged).

The videos are embedded into the element divs in the view.

In another words: I can stop the first video but not the second, third and so on even though I'm able to log every subsequent click inside my function().

Thoughts? Thank you.

$(function(){
    console.log('ready');
    $('.stop').on('click',function stopVideo () {
       //stop JW player
        if (typeof(jwplayer) != 'undefined') {
                console.log('video stopped');
                jwplayer().stop();

            }         
    })
});

view

<body>
<div class="container">
    <!-- first video -->
    <div class="jw" style="width: 40%; margin: 10px auto">
        <script src="//content.jwplatform.com/players/4sng2RGX-UQtQ90mG.js"></script>
        <button class="stop" style="padding: 8px 19px; float: right; margin: 10px">stop video</button>
    </div>

    <!-- second video -->
    <div class="jw" style="width: 40%; margin: 10px auto">
        <script src="//content.jwplatform.com/players/z5Jka98V-UQtQ90mG.js"></script>
        <button class="stop" style="padding: 8px 19px; float: right; margin: 10px">stop video</button>
    </div>
</div>
</body>

Original Q&A

There are 2 best solutions below

Alex Undefined On 07 September 2017 at 21:55

Your stopVideo() function has no way of knowing which video is it supposed to stop. jwplayer is just some global variable that may or may not be related to the button that you're clicking on.

**Null isTrue** · Accepted Answer

Per JW documentation under Targeting Multiple Players:

Not including an ID or index with your API call will always target the first player on a page. https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_introduction/

Here's a solution:

$(function(){
    //get every video with class .stopVideo
    var count = $('.stopVideo').length;

    $('#stop').on('click',function() {
       //loop through all videos stored in count
       for(var i = 0; i < count; i++) {
        if (typeof(jwplayer) != 'undefined') {
                console.log('video stopped');
                //stop player
                jwplayer(i).stop();

            } 
        }        
    })
});

view

<body>
<div class="container">
    <!-- first video -->
    <div class="stopVideo">
        <script src="//content.jwplatform.com/players/4sng2RGX-UQtQ90mG.js"></script>
    </div>

    <!-- second video -->
    <div class="stopVideo">
        <script src="//content.jwplatform.com/players/z5Jka98V-UQtQ90mG.js"></script>
    </div>
    <button id="stop">stop video</button>
</div>
</body>

I agree that's unfortunate when someone votes a question down without giving a reason for it. Keep it up and Happy coding!

JW Player - Stop (target) Multiple Players with an Event Handler

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CALLBACK

Related Questions in JWPLAYER

Related Questions in JWPLAYER7

Trending Questions

Popular # Hahtags

Popular Questions