Comment puis-je commencer à lire des vidéos lorsque je passe d'un onglet à l'autre?

Question

Comment puis-je commencer à lire des vidéos lorsque je passe d'un onglet à l'autre?

$('#tab').on('click', function() { 
    $('.active').find('video').each(function() { 
    $('#video').play(); 
    }); 
}); 

Answer 1

Pour ce faire, vous pouvez accrocher à l'événement qui se déclenche lorsqu'un Bootstrap onglet apparaît: shown.bs.tab. Ensuite, vous pouvez appeler le stop() sur les vidéos de l'onglet précédent, pendant que vous appelez start() sur l'onglet en cours. Essayez ceci:

$('#tab').on('shown.bs.tab', function(e) { 
    // start videos in new tab 
    $(e.target).find('video').each(function() { 
    this.play(); 
    }); 

    // stop videos in old tab 
    $(e.relatedTarget).find('video').each(function() { 
    this.stop(); 
    }); 
}); 

Plus d'informations sur les événements de l'onglet Bootstrap est disponible dans le documentaton

Answer 2

Pour ajouter à Rorys répondre si vous souhaitez revenir aux anciens onglets et reprendre là où vous l'avez laissé vous pouvez $('#video').pause()

Answer 3

N'utilisez pas l'ID. jQuery ne renvoie qu'un seul élément (ne sélectionne que le premier élément correspondant dans le DOM) si vous utilisez un sélecteur d'ID. Utilisez ceci:

$('#tab a').on('click', function() { 
$('#tab .active').find('video').each(function (video) { 
    $(video).get(0).play(); 
}); 
}); 

Lire this.