У меня есть флэш-плеер на моем сайте, и я хотел бы добавить наложение, где я могу вставить HTML. Идея состоит в том, что div, содержащий flash, будет анимировать свою непрозрачность до 0.5 перед отображением HTML. Я отлично работал в Google Chrome и Firefox, но, как всегда, IE вызывает у меня головную боль. Я установил wmode на opaque (а также пробовал прозрачный), но IE ведет себя странно. Чтобы мое Div-шоу показывалось поверх флэш-видео, я установил его абсолютное положение и назначил ему более высокий z-индекс, чем у любого другого элемента.
Проблема в том, что IE9 не показывает HTML, который я добавляю в мой div из jQuery. Честно говоря, я могу жить с добавлением его из PHP в скрытом div. Однако большие проблемы заключаются в том, что IE не позволяет мне анимировать непрозрачность флеш-плеера в отличие от Chrome и Firefox (и, возможно, других браузеров), а также позволяет мне взаимодействовать с флеш-плеером. Когда наложение отображается, плеер больше не отвечает, когда я нажимаю на него.
Некоторые обходные пути необходимы для IE, но мне пока не удалось найти обходной путь для затухания непрозрачности. Теперь для кода.
DOM:
<div class="videoPaths" style="z-index: 9999;">
This is the overlay container
</div>
<div class="videoWrapper">
<script src="swfobject/swfobject.js"></script>
<div id="VideoPlayer" class="embedded-video">
<div class="no-flash">You don't have flash</div>
</div>
<script>swfobject.embedSWF("http://url.com/v.swf", "VideoPlayer", "590", "332", "9.0.0", "/swfobject/expressInstall.swf", {}, {wmode:'opaque', allowscriptaccess:'always', allowfullscreen:'true', FlashVars:'token=my_token&photo%5fid=my_id'}, {id:'VideoPlayer', name:'VideoPlayer'});</script>
</div>
JavaScript (jQuery): - упрощено для иллюстрации
// Animate opacity to 0.5
$('.videoWrapper').animate({ opacity: 0.5 }, { duration: 1000, queue: false, complete: function() { showOverlay(); } });
function showOverlay() {
// Show overlay text
$('.videoPaths').html('<h2>This is the overlay text I want to show</h2>');
}
CSS:
.videoPaths {
position: absolute;
top: 100px;
text-align: center;
width: 590px;
}
В приведенном выше коде HTML, который я добавляю с помощью jQuery, не отображается, но, как я уже сказал, я могу это исправить, добавив его непосредственно в DOM, потому что тогда IE отображает его. Тем не менее, я хотел бы, чтобы анимация непрозрачности работала, но IE9 не оценил это. Кроме того, когда я так поступаю, я не могу нажать на плеер, чтобы запустить / остановить воспроизведение.
Есть идеи? Любые предложения с благодарностью. Заранее спасибо!