60 votes

Javascript pour arrêter la lecture de la vidéo HTML5 à la fermeture de la fenêtre modale

J'ai un élément vidéo html5 dans une fenêtre modale. Lorsque je ferme la fenêtre, la vidéo continue à être lue. Je suis totalement novice en matière de JS. Existe-t-il un moyen simple de lier une fonction d'arrêt de la lecture de la vidéo au bouton de fermeture de la fenêtre ? Voici ma page html :

<!DOCTYPE html >
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Modal Test</title>

<script type="text/javascript" src="jquery.js">

</script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#showSimpleModal").click(function() {
            $("div#simpleModal").addClass("show");
            return false;   
        });

        $("#closeSimple").click(function() {
            $("div#simpleModal").removeClass("show");
            return false;                   
        });
    });
</script>

<style type="text/css">

div#simpleModal
{
    position:absolute; 
    top: 40px; 
    width: 320px; 
    left: 170px; 
    border: solid 1px #bbb;     
    padding: 20px; 
    background: #fff; 
    -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); 
    opacity: 0.0; 
    -webkit-transition: opacity 0.0s ease-out; z-index: 0;
}

div#simpleModal.show
{
    opacity: 1.0; 
    z-index: 100;        
    -webkit-transition-duration: 0.25s; 
}

</style>
</head>
<body>

<a href="" id="showSimpleModal">Show Modal</a>

<div id="simpleModal" class="modal">
<video width="320"  height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
<a href="" id="closeSimple">Close</a>
</div>
</body>
</html>

Toute contribution est la bienvenue.

Gracias.

59voto

Vineeth Krishnan Points 440

J'utilise l'astuce suivante pour arrêter la vidéo HTML5. pause() la vidéo à la fermeture de la modale et set currentTime = 0 ;

<script>
     var video = document.getElementById("myVideoPlayer");
     function stopVideo(){
          video.pause();
          video.currentTime = 0;
     }
</script>

Vous pouvez maintenant utiliser la méthode stopVideo() pour arrêter la vidéo HTML5. Comme,

$("#stop").on('click', function(){
    stopVideo();
});

0 votes

C'est la bonne réponse. Les autres réponses mettent en pause la lecture plutôt que de l'arrêter. Merci !

0 votes

J'ai essayé ça mais ça n'a pas marché pour moi. L'apparence est correcte, mais il n'y a pas de pause ou d'arrêt des vidéos.

0 votes

@RolandiXor pouvez-vous nous montrer votre extrait de code ? Par la phrase "il ne pouvait pas mettre en pause ou arrêter les vidéos", il semble que vous ayez plusieurs vidéos. Si vous avez accidentellement donné les mêmes identifiants pour toutes les vidéos, vous risquez de ne pas obtenir les fonctionnalités souhaitées.

55voto

user3376436 Points 61

J'ai cherché partout sur internet une réponse à cette question. Aucune n'a fonctionné pour moi, sauf ce code. Garanti. Il fonctionne parfaitement.

$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});

1 votes

$('video').trigger('pause') ; c'est ce que j'ai fait ! Cela a parfaitement fonctionné !

0 votes

C'est celui qui a fait l'affaire pour moi, mais je crois qu'il peut nécessiter jquery (que j'utilise à cause de bootstrap), donc vous voudrez peut-être le mentionner.

1 votes

Si vous utilisez $('video').get(0).load(); il arrête aussi la lecture et fonctionne très bien

37voto

Simon Points 226

Je ne suis pas sûr que la solution de ZohoGorganzola soit correcte ; cependant, vous pouvez essayer d'accéder directement à l'élément plutôt que d'essayer d'invoquer une méthode sur la collection jQuery, donc au lieu de

$("#videoContainer").pause();

essayez

$("#videoContainer")[0].pause();

1 votes

Merci. Ça m'a aidé. Le deuxième a marché pour moi. [0] était la partie essentielle de la méthode :))))

0 votes

Pour tous ceux qui se retrouvent ici, cela fonctionne dans le code, mais pour une raison quelconque, pas dans la console (du moins pas depuis Chrome). Si vous obtenez une erreur lors du test, essayez quand même dans votre code réel, cela devrait fonctionner.

10voto

ZohoGorganzola Points 472

Lorsque vous fermez la vidéo, il vous suffit de la mettre en pause.

$("#closeSimple").click(function() {
    $("div#simpleModal").removeClass("show");
    $("#videoContainer")[0].pause();
    return false;                   
});

<video id="videoContainer" width="320" height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>

Aussi, pour référence, voici l'Opéra documentation pour le scriptage des contrôles vidéo .

6voto

Yana Lazer Points 41

La bonne réponse est : $("#videoContainer")[0].pause();

0 votes

L'avez-vous testé sur un iPad ? Il semble que lorsque vous faites réapparaître la modale, la vidéo ne se recharge pas.

0 votes

Okk cette solution fonctionne assurez-vous de mettre [0] dans la méthode sinon cela n'arrêtera pas la vidéo. Merci

0 votes

@Carlos avez-vous trouvé la solution pour votre commentaire ? J'obtiens la même erreur

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X