IE8 неправильно позиционирует оверлей DIV и продолжает воспроизводить видео, когда оно скрыто - PullRequest
Новая
       38

IE8 неправильно позиционирует оверлей DIV и продолжает воспроизводить видео, когда оно скрыто

3 голосов
/ 20 мая 2010

Пожалуйста, посмотрите на: http://www.binarymark.com/Products/PasswordGenerator/default.aspx (вкладка Обзор на диаграмме). Проблема заключается в том, что когда вы нажимаете на любой из элементов диаграммы, говоря «Группы символов», все браузеры, кроме IE8, ведут себя хорошо - то есть они отображают наложение, начинают воспроизведение видео, и когда наложение закрывается, видео перестает воспроизводить div скрыт IE8, с другой стороны, имеет два недостатка: он позиционирует оверлей в направлении снизу и слишком сильно вправо, и что еще более досадно - он продолжает воспроизводить видео в фоновом режиме, даже когда оверлейный div закрыт! Я использую flowplayer.org/tools/overlay/ для наложения. Можете ли вы помочь, пожалуйста? Спасибо.

1 Ответ

2 голосов
/ 20 мая 2010

Это подтвержденная проблема в IE (Google, и вы увидите много жалоб). В этом сообщении на SO рекомендуется несколько способов удаления и повторного добавления или клонирования и повторного добавления объектов при каждом показе / скрытии вкладок.

Альтернативный подход, поскольку кажется, что вы используете исключительно встроенные видео YouTube, - это использовать API JavaScript JavaScript YouTube и останавливать видео каждый раз, когда вкладка отображается и / или скрывается.

Обновлено, чтобы включить пример:

После поиска в YouTube JS API я бы порекомендовал перейти к предыдущему решению. Если вы не загружаете каждое видео с помощью SWFObject, возникает множество кросс-браузерных ошибок, которые в конечном итоге станут большей работой, чем вы, вероятно, готовы потратить. Мне удалось получить кросс-браузерное решение, работающее без SWFObject для одного видео, но оно не будет легко преобразовано в ваши текущие настройки: 

<p><a id="showhide" href="#show">show/hide with YT API pause</a></p>

<div id="tab">
    <object id="video1" width="640" height="385" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1" type="application/x-shockwave-flash" allowscriptaccess="always"  width="640" height="385"></embed>
    </object>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    (function () {
        var tab = $('#tab'),
            video1 = $('#video1')[0];
        $('#showhide').click(function (evt) {
            if (video1.pauseVideo) video1.pauseVideo();
            tab.toggle();
            return false;
        });
    })();
</script>

На jsFiddle здесь .

...