CODEWITHSUNDEEP
javascriptjquerycallbackjwplayerjwplayer7
Jonca33
Jonca33

Reputation: 3493

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

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>

Upvotes: 1

Views: 2342

Answers (2)

Null isTrue
Null isTrue

Reputation: 1906

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!

Upvotes: 3

Alex Undefined
Alex Undefined

Reputation: 630

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.

Upvotes: 1

Related Questions