Flash-видео, все еще играющее на DIV, которое удаляется с помощью jQuery (ошибка IE)
У меня есть некоторые вкладки jQuery, один из которых содержит флеш-видео. Когда я воспроизвожу видео на одной вкладке и нажимаю на другую в FF или Safari, видео останавливается вместе со звуком, а нажатие на вкладку видео перезагружает контент - как ожидалось.
В Internet Explorer это не так, видео продолжает воспроизводиться, даже если вкладка не выбрана. Я понимаю, что когда применяется display:none
(jQuery hide()), элемент DOM по существу удаляется из макета - почему это не происходит с браузерами IE, как я могу его исправить?
Ответы
Ответ 1
Чтобы удалить видео, а затем снова добавить его, добавьте следующее в свою функцию, которая закрывает окно видео:
// Remove and re-add video
var clone = $("#video-holder").clone(true);
$("#video-holder").remove();
$("#video").html(clone);
Если у вас есть окружающий "видео" div и внутри div-видео-владельца, в котором размещается код для встраивания.
Ответ 2
Вы можете попробовать удалить элемент, когда вы уходите от div, содержащего флеш, например $("object").remove();
Ответ 3
Просто сделайте это, чтобы обновить:
var a = document.getElementById('div_movie').innerHTML;
document.getElementById('div_movie').innerHTML = a;
Ответ 4
$( "# VideoContainer" ) HTML ( "");.
Кажется, это правильный ответ, но если я дважды нажму на один и тот же элемент, он останется пустым.
Ответ 5
просто очистите контейнер видео следующим образом:
$( "# VideoContainer" ) HTML ( "");.
Ответ 6
Вероятно, потому, что вы применяете display: none;
к элементу, содержащему объект flash, а не к самому объекту вспышки.
Я сегодня возился с подобной проблемой, и пока у меня нет точного решения, у меня есть возможность попробовать, когда вы прыгаете между div, чтобы попытаться отключить плеер:
$(flashobjectid).attr('height', '0');
Если используемый флеш-плеер является обычно используемым jw-плеером, то вы можете сделать (когда вы спрячете div):
document.getElementById(playerId).sendEvent("PLAY","false");
Ответ 7
Вам может потребоваться запрограммировать функцию player.stop
или player.pause
для проигрывателя в событии onBlur
на странице.
Ответ 8
Самая полезная вещь, которую вы могли бы сделать, это запись, которую вы используете. Youtube и Brightcove имеют Javascript API, которые вы можете использовать для управления проигрывателем. Как говорит tahdhaze, лучше всего было бы остановить игрока на событии window.onBlur и начать его снова, когда он получит фокус.
Использование CSS для прекращения воспроизведения видео в лучшем случае сложнее, а в худшем случае взломать... используйте API-интерфейс Flash-Javascript, который поставляется вместе с проигрывателем.
Ответ 9
$("#flashContainer").empty()
также будет скрывать код вставки и останавливать Flash
Ответ 10
У нас была такая же проблема. Flash-видео было встроено с помощью swfobject.embedSWF(...), однако IE9 не остановил видео, когда div был скрыт с помощью jquery.
Простая работа:
Вызовите swfobject.embedSWF(...) снова, чтобы (re) загрузить swf в один и тот же целевой div.
Если у вас есть видео с автозапуском, попробуйте загрузить еще один пустой swf файл при скрытии.
Приветствия
Ответ 11
У меня была такая же проблема со встроенным видео YouTube. Это было окончательное решение, которое работало в IE, Firefox, Chrome и Safari:
Ниже приведен jQuery script, HTML и CSS, используемые для решения проблемы IE продолжения воспроизведения звука, когда скрытое видео YouTube скрыто.
Это jQuery script (который я разместил непосредственно перед тегом body 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 для div с идентификатором "tinleyvideo", который содержит встроенный в YouTube код iframe. Тег link с классом "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;
}
Надеюсь, что это поможет.
Ответ 12
Мое решение. Это должно работать:
$('#myVideoContainer object').remove();
Ответ 13
Не нужно использовать JQuery, достаточно простого Javascript-решения. Просто замените проигрыватель div одним клоном:
oldVideoDiv = document.getElementById(videoId);
newVideoDiv = oldVideoDiv.cloneNode(true);
oldVideoDiv.parentNode.replaceChild(newVideoDiv, oldVideoDiv);