Flash-видео, воспроизводимое поверх всего остального в IE7 - PullRequest
Новая
       17

Flash-видео, воспроизводимое поверх всего остального в IE7

2 голосов
/ 13 апреля 2010

Я часами читаю проблему IE7 с отображением Flash-содержимого поверх других элементов, в частности, навигационных меню (например, часто это проблема с выпадающими меню и рекламными баннерами Flash). Я попробовал несколько из предложенных решений, но ни одно из них не сработало для меня до сих пор. Я сделаю все возможное, чтобы объяснить обстоятельства, и буду признателен за любые советы по этому вопросу!

Обновление

По запросу Mercator, я предоставляю большой пример кода, чтобы помочь в любых ваших советах. Посмотрите на HTML ниже: 

<body>
  <div id="page-wrap">
    <div id="content-wrap">
      <div id="main">
        <h1>Page Title</h1>
        <p>Paragraph text before video.</p>
        <div class="video-container">
          <script type="text/javascript">
          AC_FL_RunContent('id','player','name','player','width','480','height','294','src','player','allowscriptaccess','always','allowfullscreen','true','flashvars','file=mp4/VIDEO_FILE.mp4','movie','player' ); //end AC code
          </script>
          <noscript>
            <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="480" height="294">
              <param name="wmode" value="transparent" />
              <param name="movie" value="player.swf" />
              <param name="allowfullscreen" value="true" />
              <param name="allowscriptaccess" value="always" />
              <param name="flashvars" value="file=mp4/VIDEO_FILE.mp4" />
                <embed
                  wmode="transparent"
                  type="application/x-shockwave-flash"
                  id="player2"
                  name="player2"
                  src="player.swf" 
                  width="480" 
                  height="294"
                  allowscriptaccess="always" 
                  allowfullscreen="true"
                  flashvars="file=mp4/VIDEO_FILE.mp4" 
                ></embed>
            </object>
          </noscript>
        </div>
        <p>Paragraph after video.</p>               
      </div><!-- end main -->
      <div id="subContent">
        <p>Sub-content.</p>
      </div><!-- end subContent -->
      <div id="content-clear"></div>
    </div><!-- end content-wrap -->
  </div><!-- end page-wrap -->
  <div id="footpanel">
    <ul id="mainpanel">
      <li id="panel-link"><a href="#"><span class="icon"></span>Panel Link</a>
    <div class="subpanel">
      <h3><span> &ndash; </span>Panel Link</h3>
      <ul>
        <li><p>Revealed content</p></li>
          </ul>
        </div>
      </li>
    </ul>
  </div> <!-- END footpanel -->
</body>

Ниже представлены не презентационные селекторы CSS, которые применяются к приведенным выше элементам div: 

body { /*no positioning styles applied */ }
#page-wrap { width: 100%; }
  #content-wrap { width: 960px; margin 0 auto; }
    #main { float: left; width: 573px; }
      .video-container { position: relative; width: 480px; z-index: 1; }
    #sub { float: left; width: 347px; }
    #content-clear { clear: both; }
#foot-panel { position: fixed; width: 94%; bottom: 0; left: 0; z-index: 3000; }
  ul#main-panel { float: left; }

В рабочей панели используются всплывающие меню на основе jQuery, если это обеспечивает какой-либо дополнительный контекст. Эти меню имеют z-индексы в диапазоне 300X, которые отображаются над панелью.

Вспышка, о которой идет речь, - это проигрыватель JW, воспроизводящий флэш-видео или mp4. В настоящее время теги object и embed находятся внутри контейнера div.

Мое понимание предыдущих решений состояло в том, что комбинация изменений параметров и изменения позиционирования / z-индекса в контейнере div должна была решить проблему. Увы, это не так. Игрок находится на верхней части панели ног.

Другая информация, которая может или не может быть полезной, состоит в том, что страница является переходной XHTML 1.0 и что Dreamweaver сообщает об 1 ошибке в коде HTML: не соответствует спецификации XHTML 1.0. Этот факт не препятствует просмотру видео в любом протестированном браузере, и страница по-прежнему правильно отображается в формате FF.

Заранее спасибо!

Ответы [ 2 ]

5 голосов
/ 18 июня 2010

Я знаю, что опаздываю к этой игре здесь, но я подумал, что я бы добавил, что размещение wmode = "transparent" внутри вашего тега вставки помогает с этой проблемой, так как это заставляет Flash подчиняться z-index используйте слово «как-то», потому что есть редкая документация относительно того, почему это так - по крайней мере, из моего опыта, есть редкая документация).

Так или иначе, поместите wmode = "transparent" внутри вашей вставки, а затем удалите z-index и позиционирование из фактического div, содержащего видео.

Это ДОЛЖНО работать. Если это не так, то это может быть другая проблема, потому что у меня была ТОЧНАЯ та же самая проблема только сейчас, и выполнение этих двух вещей устранило ее для меня.

Надеюсь, это поможет.

О, и вы могли бы рассмотреть это (это мне очень помогло): http://manisheriar.com/blog/flash_objects_and_z_index

Кейси Дж. Берк

0 голосов
/ 13 апреля 2010

Вы пытались удалить position: relative и z-index: 1 из video-container?

Эти свойства действительно только увеличивают проблемы, а не уменьшают их. Я подумал, что они вам могут понадобиться, потому что на остальной части страницы происходит много позиционирования, но, похоже, это не так.

...