Javascript для остановки воспроизведения видео HTML5 при закрытии модального окна - PullRequest
Новая
       6

Javascript для остановки воспроизведения видео HTML5 при закрытии модального окна

45 голосов
/ 11 мая 2011

У меня есть элемент видео html5 в модальном окне.Когда я закрываю окно, видео продолжает воспроизводиться.Я новичок в JS.Есть ли простой способ привязать функцию остановки воспроизведения видео к кнопке закрытия окна?Ниже моя 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>

Любой вклад с благодарностью.

Спасибо.

Ответы [ 9 ]

42 голосов
/ 04 марта 2014

Я искал по всему интернету ответ на этот вопрос. никто не работал для меня, кроме этого кода. Гарантированный. Работает отлично. 

$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});
36 голосов
/ 15 ноября 2013

Я использую следующую уловку, чтобы остановить видео HTML5.pause () видео при модальном закрытии и установите currentTime = 0; 

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

Теперь вы можете использовать метод stopVideo (), чтобы остановить видео HTML5.Мол, 

$("#stop").on('click', function(){
    stopVideo();
});
35 голосов
/ 16 апреля 2012

Я не уверен, что решение ZohoGorganzola является правильным; однако вы можете попытаться получить элемент непосредственно, а не вызывать метод в коллекции jQuery, поэтому вместо 

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

попробуй 

$("#videoContainer")[0].pause();
8 голосов
/ 11 мая 2011

Когда вы закрываете видео, вам просто нужно приостановить его. 

$("#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>

Кроме того, для справки приведена документация Opera для создания сценариев управления видео .

6 голосов
/ 23 августа 2012

Правильный ответ: $("#videoContainer")[0].pause();

4 голосов
/ 15 февраля 2016

Попробуйте: 

function stop(){
    var video = document.getElementById("video");
    video.load();
}
1 голос
/ 18 февраля 2014

Для тех, кто борется с этой проблемой с видео, встроенным с помощью тега <object>, вам нужна функция Quicktime element.Stop(); Например, чтобы остановить все и все фильмы, используйте: 

var videos = $("object");

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

Обратите внимание на нестандартную заглавную букву "S" на Stop ();

1 голос
/ 15 августа 2013

Попробуйте это: 

$(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 голос
/ 31 июля 2013

Ни один из них не работал для меня, используя 4.1 video.js CDN. Этот код убивает видео, воспроизводимое в модальном режиме при нажатии (.closemodal). У меня было 3 видео. Кто-то еще может рефакторинг. 


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();
});
});

согласно их API документов.

...