Я использую инструменты jQuery для наложения. Внутри наложения у меня есть видео HTML5. Однако, когда я закрываю оверлей, видео продолжает играть. Любая идея, как я могу остановить видео, когда я закрываю оверлей? Вот код, который у меня есть:
$("img[rel]").overlay({ onClose: function() { <stop the video somehow> }, mask: { color: '#000', opacity: 0.7 }});
Я попытался использовать
$('video').pause();
Но это также приостановило наложение.
Проблема может заключаться в выборе селектора 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 здесь.
Также проверьте, есть ли резервная ссылка здесь.
Если вы хотите остановить воспроизведение любого тега видео на своей странице, этот небольшой фрагмент jQuery поможет вам:
$("video").each(function () { this.pause() });
Для меня работает следующее:
$('video')[0].pause();
Запуск видео с различными браузерами
Для 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="";
У кого-то уже есть ответ.
$('video') вернет массив элементов видео. Это действительно действительный селектор!
так
$("video").each(function () { this.pause() });
будет работать.
Для приложения 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="";
Мой опыт работы с Firefox заключается в том, что добавление атрибута 'id к элементу видео приводит к тому, что Firefox полностью разбивается... как в запросе на отправку отчета об ошибке. Удалите элемент id, и он отлично работает. Я не уверен, что это верно для всех, но я думал, что поделюсь своим опытом, если это поможет.
Чтобы сэкономить часы на время кодирования, используйте плагин jquery, уже оптимизированный для встроенных видеофрагментов.
Я провел пару дней, пытаясь интегрировать API Vimeo moogaloop с помощью jquery-инструментов безуспешно. См. этот список для нескольких более простых опций.
Попробуйте следующее:
if ($.browser.msie)
{
// Some other solution as applies to whatever IE compatible video player used.
}
else
{
$('video')[0].pause();
}
Но учтите, что $.browser устарел, но я не нашел сопоставимого решения.