Аудио видео продолжает воспроизводиться после закрытия модального набора - PullRequest
0 голосов
/ 23 сентября 2018

Пытался найти решение для этого, но не смог найти ничего, что сработало.Я попытался

$('video').trigger('pause');

, и в html нет кнопки закрытия, к которой можно прикрепить скрипт.Тем не менее, я не знаю jquery или javascript, поэтому я надеюсь, что кто-то может помочь.

Использование «Replete Modal», которое кажется довольно популярным, но у меня возникла проблема с продолжением воспроизведения звуковой дорожки видео, еслиМодал закрыт перед просмотром в полном объеме.Кажется, только проблема при просмотре в настольных браузерах.

Надеялся найти решение, которое также останавливает звук.

Ниже приведен HTML-код, который я вставил:

<div style="margin:50 auto; width:700px;">
		<a class="vimeo" >vimeo</a>
		<script>
			$(window).load( function(){
				rplm({
					title: "ETSA Teacher Training",
					text: '<video width="100%" height="338" controls autoplay><source src="Endeavour Teaching.mp4" type="video/mp4"><!--source src="movie.ogg" type="video/ogg"-->Your browser does not support the video tag.</video>',
					html: true,
					showConfirmButton: true,
					delay: 2,
					animation: 'fadeIn',
					allowOutsideClick: true,
					overlay: "black",
					videoHeight: "338",
					videoWidth: "100%",
		preventDialog: true,
		cookieName: "blockModal",
		preventText: "Block This Pop-up.",
		preventDays: 30,
		modalNOverlay: 'black',
				});
			});
		</script>
	</div>
Вы можете увидеть это в действии здесь: http://www.endeavourtsa.org/index-test3.html Очевидно, есть файлы CSS и JS, но, поскольку я не знаю, какая часть нужна, я не хотел публиковать всекод здесь, если я не должен был.Я могу опубликовать, если требуется, или вы можете найти файлы здесь: http://www.endeavourtsa.org/modal.zip

Любая помощь с благодарностью!

1 Ответ

0 голосов
/ 23 сентября 2018

посмотрев на источник, вам нужно добавить идентификатор видео к видео во всплывающем окне, чтобы вы могли ссылаться на него позже (id="evideo")

rplm({
    title: "ETSA Teacher Training",
    text: '<video id="evideo" width="100%" height="338" controls autoplay><source src="Endeavour Teaching.mp4" type="video/mp4"><!--source src="movie.ogg" type="video/ogg"-->Your browser does not support the video tag.</video>',

, а затем добавитьобработчик onclick для кнопки, закрывающей всплывающее окно (если rplm не имеет модели событий, которая позволяет вам легче прикрепить код к событию close для всплывающего окна):

        modalNOverlay: 'black',
        });
        document.getElementsByClassName("confirm")[0].addEventListener("click",function(){alert('boo')})
    });
</script>

(может потребоваться некоторая подстройка и дополнительные события, так как модальное можно также отклонить, щелкнув за рамкой, но для просмотра более элегантного решения потребуется документация rplm)

...