web-dev-qa-db-fra.com

Javascript pour arrêter la lecture de vidéos HTML5 sur la fenêtre modale close

J'ai un élément vidéo html5 sur une fenêtre modale. Lorsque je ferme la fenêtre, la vidéo continue de jouer. Je suis un débutant total à JS. Existe-t-il un moyen simple de lier une fonction d’arrêt de la lecture vidéo au bouton de fermeture de la fenêtre? Ci-dessous 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 entrée grandement appréciée.

Merci.

javascriptmodal-dialoghtml5-video
46
user747836

J'ai cherché partout sur Internet une réponse à cette question. aucun n'a fonctionné pour moi excepté ce code. Garanti. Ça marche parfaitement.

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

J'utilise l'astuce suivante pour arrêter la vidéo HTML5. pause () la vidéo à la fermeture modale et définissez 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();
});
37
way2vin

Je ne suis pas sûr que la solution de ZohoGorganzola soit correcte; Cependant, vous pouvez essayer d’obtenir directement l’élément plutôt que d’invoquer une méthode sur la collection jQuery.

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

essayer

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

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

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

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

En outre, à titre de référence, voici le Opera documentation sur les commandes de script vidéo) .

8
Tom Chandler

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

6
Yana Lazer

Essaye:

function stop(){
    var video = document.getElementById("video");
    video.load();
}
4
Guilherme Ferreira

Aucun de ceux-ci n'a fonctionné pour moi avec 4.1 video.js CDN 4.1. Ce code tue la vidéo en cours de lecture dans un modal lorsque le (.closemodal) est cliqué. J'ai eu 3 vidéos. Quelqu'un d'autre peut refactorer.


var myPlayer = videojs("my_video_1");
var myPlayer2 = videojs("my_video_2");
var myPlayer3 = videojs("my_video_3");
$(".closemodal").click(function(){
   myPlayer.pause();
myPlayer2.pause();
myPlayer3.pause();
});
});

selon leur Api docs.

1
pjammer

Essaye ça:

$(document).ready(function(){
    $("#showSimpleModal").click(function() {
        $("div#simpleModal").addClass("show");
        $("#videoContainer")[0].play();
        return false;   
    });

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

Pour les personnes confrontées à ce problème avec des vidéos intégrées à l'aide de la balise <object>, La fonction que vous souhaitez utiliser est la fonction element.Stop(); de Quicktime. Par exemple, pour arrêter la lecture de tous les films, utilisez:

var videos = $("object");

for (var i=0; i < videos.length; i++)
{
    if (videos[i].Stop) { videos[i].Stop(); }
}

Notez le "S" majuscule non standard sur Stop ();

1
Alan Bellows