HTML5 Video Stop onClose

Question

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

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

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

$('video').pause();

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

Answer 1

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

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

Answer 2

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

Для 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 * ​​1011*

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;

ДляХром 22 * ​​1024 *

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

Answer 3

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

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

Answer 4

Возможно, проблема в селекторе jquery, который вы выбрали. $("video") не является селектором

Правильный селектор может помещать элемент id для тега video , т.е.
Допустим, ваш элемент видео выглядит так:

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

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

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

Answer 5

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

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

так

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

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

Answer 6

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

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

Исправлена ​​привязка к событию beforepagehide.

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

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

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

Answer 7

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

Answer 8

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

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

Answer 9

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

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

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