Flash-видео, все еще воспроизводимое на DIV, которое удаляется с помощью jQuery (ошибка IE)
У меня есть несколько вкладок jQuery, одна из которых содержит флэш-видео. Когда я проигрываю видео на одной вкладке и нажимаю на другую в FF или Safari, видео останавливается вместе со звуком, при нажатии на вкладку видео происходит перезагрузка контента - как и ожидалось.
В Internet Explorer это не так, видео продолжает воспроизводиться, даже если вкладка не выбрана. Я понимаю, что когда display:none (jQuery hide()) применяется элемент DOM по существу удален из макета - почему это не происходит с браузерами IE, как я могу это исправить?
13 ответов
Чтобы удалить видео, а затем повторно добавить его, добавьте следующее в свою функцию, которая закрывает окно видео:
// Remove and re-add video
var clone = $("#video-holder").clone(true);
$("#video-holder").remove();
$("#video").html(clone);
Где у вас есть окружающий div "video", и внутри div "video-holder", в котором находится код для встраивания.
Вы можете попробовать удалить элемент, когда вы вкладываете вкладку из div, содержащего flash, как $("object").remove();
Просто сделайте так, чтобы обновить:
var a = document.getElementById('div_movie').innerHTML;
document.getElementById('div_movie').innerHTML = a;
$("#VideoContainer") HTML ("").
Казалось бы, правильный ответ, но если я щелкну один и тот же элемент дважды, он останется пустым.
Просто очистите контейнер видео следующим образом:
$ ("# VideoContainer") HTML ("").
У нас была такая же проблема. Flash-видео было внедрено с использованием swfobject.embedSWF(...), однако IE9 не останавливал видео, когда div был скрыт с помощью jquery.
Простой обходной путь: снова вызовите swfobject.embedSWF(...), чтобы (повторно) загрузить swf в тот же целевой div.
Если у вас есть видео с автовоспроизведением, попробуйте загрузить другой пустой SWF-файл при скрытии. ура
Вам может понадобиться запрограммировать player.stop или же player.pause функция для игрока на onBlur событие страницы.
Мое решение, это должно работать:
$('#myVideoContainer object').remove();
Вероятно, потому что вы применяете display: none; в div, содержащий объект flash, а не сам объект flash.
Сегодня я возился с подобной проблемой, и, хотя у меня нет точного решения для вас, у меня есть возможность, которую вы можете попробовать, когда перепрыгиваете через div, чтобы попытаться выключить плеер:
$(flashobjectid).attr('height', '0');
Если используемый вами флеш-плеер оказывается наиболее часто используемым jw-плеером, то вы можете сделать это (когда вы скрываете div):
document.getElementById(playerId).sendEvent("PLAY","false");
У меня была такая же проблема со встроенным видео на YouTube. Это было окончательное решение, которое работало в IE, Firefox, Chrome и Safari:
Ниже приведены сценарий jQuery, HTML и CSS, используемые для решения проблемы IE, связанной с продолжением воспроизведения звука, когда встроенное видео YouTube скрыто.
Это скрипт jQuery (который я поместил непосредственно перед конечным тегом body):
<script type="text/javascript">
$(function() {
$('.close').click(function() {
// needed to find some way to remove video and then replace it because IE would close the div but continue to play sound
$('iframe').hide(); // must hide the YouTube iframe first or closing it before playing will cause a black window in IE
$('#video1').hide('fast'); // then hide the container div that has the video div that has the YouTube iframe in it
var bringback = $("#tinleyvideo").clone(true); //clone the div that has the YouTube iframe and assign it to a variable
$("#tinleyvideo").remove(); // remove the div that has the YouTube iframe
$("#video1").html(bringback); // replace or recreate the div that has the YouTube iframe using the variable with cloned information
});
$('.tourism').click(function() {
$('iframe').show(); // show the YouTube iframe
$('#video1').show('fast'); // show the div that contains the YouTube video div
});
});
Вот структура HTML. Тег ссылки с классом "туризм" представляет собой ссылку на изображение, используемую для вызова всплывающего окна с видео. Тег div с идентификатором "Video1" - это контейнерный блок для div с идентификатором "tinleyvideo", который содержит встроенный код YouTube. Тег ссылки с классом "close" скрывает видео с помощью jQuery.
<a href="#" class="tourism"><img src="images/home_video.jpg" width="217" height="161" border="0"/></a>
<div id="video1">
<div id="tinleyvideo"><a href="#" class="close" style='float:left; color:white; padding-bottom:10px; font-size:12px;'>Close</a><br />
<iframe width="560" height="315" src="http://www.youtube.com/embed/XxnM7UzquSs?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS (он позиционирует всплывающее окно, изначально не отображает его и добавляет другие пользовательские стили):
#video1 {
position: absolute;
top:240px;
left:220px;
width:560px;
height:360px;
display: none;
-moz-border-radius: 10px;
padding: 10px;
background-color: #486A74;
border: 3px solid #DCC35C;
z-index:400;
}
Надеюсь это поможет.
$("#flashContainer").empty()
также сбросит код встраивания и остановит Flash
Самое полезное, что вы можете сделать, это сообщение о том, какой видеоплеер вы используете. Youtube и Brightcove имеют API-интерфейсы Javascript, которые можно использовать для управления плеером. Как говорит здесь tahdhaze, лучшее, что можно сделать, это остановить игрока на событии window.onBlur и запустить его снова, когда оно получит фокус.
Использование CSS, чтобы остановить воспроизведение видео, в лучшем случае сложно, а в худшем случае взломать... использовать API-интерфейс моста Flash-Javascript, который поставляется с проигрывателем.
Нет необходимости использовать JQuery, достаточно простого решения Javascript. Просто замените div игрока на клон самого себя:
oldVideoDiv = document.getElementById (videoId);
newVideoDiv = oldVideoDiv.cloneNode (true);
oldVideoDiv.parentNode.replaceChild (newVideoDiv, oldVideoDiv);