2010-05-21 5 views
15

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

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

Я попытался с помощью

$('video').pause(); 

Но это сделало паузу накладки, а также.

ответ

8

Проблема может быть с селектором Jquery вы выбрали $("video") не селектор

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

<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 here.
Также проверьте, что имеется обратная ссылка here.

+1

Использование идентификатора довольно раздражает, если у вас есть N видео. – WhyNotHugo

+1

Что делать, если я хочу остановить воспроизведение _all_ видео? (например, подстановочный знак) – adib

+21

'' '$ (" video ")' '' * * - это селектор, но вы должны использовать '' '$ (" video ") [0]' '', чтобы получить первое совпадение, например : '' '$ (" video ") [0] .pause()' '' – forresto

2

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

1

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

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

9

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

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

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

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

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

+2

Поскольку '$ .broswer' устарел, может быть, это не очень хорошее решение, тем более что уже есть принятый ответ? –

22

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

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

Для более 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 = "";

+0

Я использовал $ ('видео') каждый (функция (k, v) {jQuery ('video') [k] .pause();}); который работает для меня, получил идею из этой темы и @jantoine. Не тестируйте IE. – raphie

9

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

Для 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=""; 
+0

Это, похоже, действительно не направлено конкретно на заданный вопрос –

6

Кто-то уже есть ответ.

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

так

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

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