CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
bartbrat
bartbrat

Reputation: 53

How to stop all the other video in HTML5 when one start

sorry for my bad English.

I have lots of video items in my web page and when I start one of them I want that all other video stop playing and I wish I could change from one video to another

This is my situation:

Web Page: 

<video id="..." width="352px" height="288px" poster="..." preload="none" controls="">
    <source src="..." type="video/webm"></source>
</video>

Javascript:

$('video').off('canplay').on('canplay', function() {
   this.play();
});

$('video').off('canplaythrough').on('canplaythrough', function() {
   this.play();
});

$('video').off('waiting').on('waiting', function() {
   this.play();
});

I don't want that video go on pause, I want that all other video are in same situation as when the page is loaded (gray image with play button above)

$('video').off('play').on('play', function() {
    var dd = this.id
    $('video').each(function( index ) {
        if(dd != this.id){
            // Maybe here the solution...
        }
    });
});

Thanks

Upvotes: 1

Views: 8505

Answers (2)

Development Zeast
Development Zeast

Reputation: 21

<script>

$(document).ready(function(e) {
    $('audio,video').bind('play', function() {
    activated = this;
    $('audio,video').each(function() {
        if(this != activated) this.pause();
    });
});


//flash - prevent simultaneous video playback - pauses other playing videos upon play
$(".video-js").click(function(){
    activated = this;
    $('.video-js').each(function() {
        if(this != activated) _V_($(this).attr("id")).pause();
    });
});
});

</script>

Upvotes: 2

Rob M.
Rob M.

Reputation: 36511

If you are wondering how to stop HTML5 videos, you just have to pause() them and set their currentTime attribute to 0;

$('video').off('play').on('play', function() {
    var dd = this.id
    $('video').each(function( index ) {
        if(dd != this.id){
            this.pause();
            this.currentTime = 0;
        }
    });
});

or instead of pause() and reset of currentTime, you could call this.load() which will reset the video and show the poster again.

Upvotes: 4

Related Questions