HTML5 Video Stop onClose

Я использую инструменты jQuery для наложения. Внутри наложения у меня есть видео HTML5. Однако, когда я закрываю оверлей, видео продолжает играть. Любая идея, как я могу остановить видео, когда я закрываю оверлей? Вот код, который у меня есть:

$("img[rel]").overlay({ onClose: function() { <stop the video somehow> }, mask: { color: '#000', opacity: 0.7 }});

Я попытался использовать

$('video').pause();

Но это также приостановило наложение.

Ответы

Ответ 1

Проблема может заключаться в выборе селектора jquery $("video") не является селектором

Правильный селектор может помещать элемент id для тега видео i.e.
Скажем, ваш элемент видео выглядит следующим образом:

<video id="vid1" width="480" height="267" oster="example.jpg" durationHint="33"> 
    <source src="video1.ogv" /> 
    <source src="video2.ogv" /> 
</video>

Затем вы можете выбрать его с помощью $("#vid1") с хэш-меткой (#), селектором id в jquery. Если элемент видео отображается в функции, то у вас есть доступ к HtmlVideoElement (HtmlMediaElement). Эти элементы имеют элемент управления элементом видео, в вашем случае вы можете использовать метод pause() для вашего видеоэлемента.

Проверьте ссылку для VideoElement здесь.
Также проверьте, есть ли резервная ссылка здесь.

Ответ 2

Если вы хотите остановить воспроизведение любого тега видео на своей странице, этот небольшой фрагмент jQuery поможет вам:

$("video").each(function () { this.pause() });

Ответ 3

Для меня работает следующее:

$('video')[0].pause();

Ответ 4

Запуск видео с различными браузерами

Для Opera 12

window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

Для Firefox Nightly 18.0

window.navigator.mozGetUserMedia(param, function(stream) {
                            video.mozSrcObject = stream;
                        }, videoError );

Для Chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) {
                            video.src =window.webkitURL.createObjectURL(stream);
                        },  videoError );

Остановка видео с различными браузерами

Для Opera 12

video.pause();
video.src=null;

Для Firefox Nightly 18.0

video.pause();
video.mozSrcObject=null;

Для Chrome 22

video.pause();
video.src="";

Ответ 5

У кого-то уже есть ответ.

$('video') вернет массив элементов видео. Это действительно действительный селектор!

так

$("video").each(function () { this.pause() });

будет работать.

Ответ 6

Для приложения JQM + PhoneGap для меня работало следующее.

Следующим был минимум, который я должен был сделать, чтобы заставить его работать. Я действительно переживал ларек из-за буферизации, в то время как порождал аякс-запросы, когда пользователь нажал кнопку "Назад". Приостановка видео в браузере Chrome и браузере Android сохранила его буферизацию. Запрос non-async ajax застрянет в ожидании завершения буферизации, чего никогда не будет.

Связывание этого с событием beforeSthide зафиксировало его.

 $("#SOME_JQM_PAGE").live("pagebeforehide", function(event)
 {
           $("video").each(function () 
           { 
               logger.debug("PAUSE VIDEO");
               this.pause();
               this.src = "";
           });
 });

Это очистит каждый тег видео на странице.

Важной частью является this.src="";

Ответ 7

Мой опыт работы с Firefox заключается в том, что добавление атрибута 'id к элементу видео приводит к тому, что Firefox полностью разбивается... как в запросе на отправку отчета об ошибке. Удалите элемент id, и он отлично работает. Я не уверен, что это верно для всех, но я думал, что поделюсь своим опытом, если это поможет.

Ответ 8

Чтобы сэкономить часы на время кодирования, используйте плагин jquery, уже оптимизированный для встроенных видеофрагментов.

Я провел пару дней, пытаясь интегрировать API Vimeo moogaloop с помощью jquery-инструментов безуспешно. См. этот список для нескольких более простых опций.

Ответ 9

Попробуйте следующее:

if ($.browser.msie)
{
   // Some other solution as applies to whatever IE compatible video player used.
}
else
{
   $('video')[0].pause();
}

Но учтите, что $.browser устарел, но я не нашел сопоставимого решения.