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

ProgramBox

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

Post author:admin
Запись опубликована:3 мая, 2023
Post category:Вопросы по программированию

#javascript #modal-dialog #html5-video

#javascript #модальный диалог #html5-video

Вопрос:

У меня есть видеоэлемент 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>

Любой ввод приветствуется.

Спасибо.

Ответ №1:

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

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

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

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

1. Это правильный ответ. Другие ответы приостанавливают воспроизведение, а не останавливают его. Спасибо!

2. Я пробовал это, но у меня это не сработало. Это выглядит правильно, но это не приведет к приостановке или остановке видео.

3. @RolandiXor можете ли вы показать нам свой фрагмент кода? По фразе «это не приведет к приостановке или остановке видео» похоже, что у вас есть несколько видео. Если вы случайно указали одинаковые идентификаторы для всех тегов video, вы можете не получить желаемые функциональные возможности.

4. @way2vin Я использовал разные идентификаторы, но этот метод не сработал. Тот, что выше вашего, сделал. Кстати, требуется ли для вашего метода jquery? Я спрашиваю, потому что я заметил, что вы используете «$».

5. @RolandiXor да, в моем примере я использовал jquery. Не важно, вы можете использовать чистый javascript для этой цели.

Ответ №2:

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

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

1. $(‘video’).trigger(‘pause’); это тот путь, которым я пошел! Сработало отлично!

2. Это то, что помогло мне, но я полагаю, что для этого может потребоваться jquery (который я использую из-за bootstrap), поэтому вы можете захотеть упомянуть об этом.

3. если вы используете $('video').get(0).load(); , это тоже останавливает воспроизведение и работает просто отлично

4. Большое спасибо, это единственное решение..

5. Большое спасибо. Это очень полезно 🙂

Ответ №3:

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

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

попробуйте

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

1. Спасибо, это помогло мне. второй вариант сработал для меня. [0] было неотъемлемой частью метода :)))

2. Для любого, кто найдет здесь свой путь, это работает в коде, но по какой-то причине этого нет в консоли (по крайней мере, не в Chrome). Если вы получаете ошибку во время тестирования, попробуйте это в любом случае в вашем реальном коде, это должно сработать.

Ответ №4:

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

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

Также, для справки, вот документация Opera по написанию сценариев управления видео.

Ответ №5:

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

1. вы тестировали это на iPad? Похоже, что когда вы открываете модальную резервную копию, видео, похоже, больше не загружается.

2. Okk это решение работает.. обязательно укажите [0] в методе .. иначе это не остановит видео. Спасибо

3. @Carlos ты нашел решение для своего комментария? Я получаю ту же ошибку

4. @climboid, на самом деле нам пришлось использовать другое решение (VideoJS) из-за этой проблемы. Теперь может быть улучшена поддержка видео HTML5 и модального, подумал, что если это все еще происходит, вероятно, нет.

5. @climboid, мое решение основано на JS fiddle для решения Video JS и iPad. jsfiddle.net/UGS2U/1

Ответ №6:

Попробуйте:

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

1. Почему OP должен использовать этот код? Не могли бы вы расширить свой ответ объяснением?

2. От Google dev: «Примечание: Вызов video.pause() — не единственный способ прервать видео. Вы можете полностью сбросить состояние воспроизведения видео, включая буфер, с помощью video.load() и video.src …» ( developers.google.com/web/updates/2017/06 / … )

Ответ №7:

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

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

Ответ №8:

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

 var videos = $("object");

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

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

Ответ №9:

Ни один из них не работал у меня с использованием 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.

Ответ №10:

Мне удалось остановить видео с помощью «get (0)» (извлекать элементы DOM, соответствующие объекту jQuery):

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

Ответ №11:

// модальный <идентификатор div=’image-modal’ ….> проигрыватель YouTube // или // модальный <идентификатор div =’image-modal’ ….> видеопроигрыватель

 $('#image-modal').on('hidden.bs.modal', function () {
    $("#image-modal iframe").attr("src", $("#image-modal iframe").attr("src"));
    $("#image-modal video").attr("src", $("#image-modal video").attr("src"));
});

1. Этот ответ, похоже, ничего не решает из вопроса, и неясно, что он пытается сообщить в целом. Каковы намерения? Что должен делать фрагмент? Почему и как это относится к вопросу?

2. Определенно должно быть лучшее решение.