CODEWITHSUNDEEP
jqueryhtmlvideovideo.js
user3022992
user3022992

Reputation: 207

Pause playback on a video.js player

I have a simple modal window with a video in it (using Video.js). I am opening it and closing it using jquery on click. I need the video to pause/stop if the user closes the window at any point. For some reason I can't get it to work. I have been searching for a while now and getting the same answers so it should be simple but something is causing it to not work. Any help would be appreciated!

<a href="#" class="video1"></a>

<div class="modal" id="video1" style="display:none;">
    <div class="modalBg"></div>
    <div class="videoContainer">
        <div class="closeBtn"></div>
        <div class="video">
            <video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="auto" height="auto" data-setup="{}">
                <source src="video/video.mp4" type='video/mp4' />
            </video>
        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {

        $(".closeBtn").click(function() {
            $(".modal").hide();
            $("#vid1").player().pause();
        });

        $(".video1").click(function() {
            $("#video1").show();
        });

        $('video').on('ended',function(){
            $(".modal").hide();
        });
    });
</script>

I have included all of the necessary video.js files in the head, don't think it's important to include those references here.

Upvotes: 2

Views: 4642

Answers (3)

Edinson Tique
Edinson Tique

Reputation: 1

$("#my-video")[0].player.pause();

Upvotes: 0

misterben
misterben

Reputation: 7821

Video.js replaces the original video element with a div that contains the player tech, poster element, controls etc. The player tech element within the player may be a video element, but can also be an object in the case that Flash fallback is used. In either case the tech element itself will not have the original id.

Your solution targets the new video element, but this only works where the HTML tech has been used. Instead, use video.js's api to pause the video:

$.each(videojs.players, function(index, player) {
  player.pause();
});

For a single video:

videojs('video1').pause();

Upvotes: 0

user3022992
user3022992

Reputation: 207

Figured it out...

this works for pausing all videos:

$('video').each(function() {
    $(this).get(0).pause();
});

this works for playing a specific video:

$("#video1 video").get(0).play();

Upvotes: 6

Related Questions