在IE7上播放其他任何內容的Flash視頻

我一直在花費數小時閱讀關於在其他元素（尤其是導航菜單）上呈現Flash內容的IE7問題的小時數（這通常是下拉菜單和Flash廣告的問題例如橫幅）。我已經嘗試了一些建議的解決方案，但目前爲止還沒有爲我工作。我會盡我所能來解釋情況，並會很感激任何有關此事的建議！在IE7上播放其他任何內容的Flash視頻

更新

在墨卡託的要求，我提供了大量的代碼樣本，以協助你可能有任何建議。考慮下面的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>

以下是適用於上述的div非表象的CSS選擇器：

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; }

的footpanel使用jQuery的供電彈出菜單，如果提供任何進一步的內容。這些菜單的300X範圍內的z索引出現在面板上方。

有問題的Flash是JW播放器播放Flash視頻或mp4。目前，對象和嵌入標籤位於容器div內。

我對以前的解決方案的理解是，參數更改和容器div上的定位/ z-index更改的組合應該解決了問題。唉，事實並非如此。玩家駐留在面板頂部。

其他可能或可能不會有幫助的信息是該頁面是XHTML 1.0 Transitional，並且Dreamweaver在HTML代碼中報告1錯誤：<嵌入>不在XHTML 1.0規範中。這一事實並不妨礙在任何瀏覽器中查看視頻，並且頁面仍然在FF中正確顯示。

在此先感謝！

來源

2010-04-12 Brett

請問您能否爲我們提供更多的HTML？實際上，儘量減少HTML/CSS到最小的測試用例。定位和z-索引將解決這個問題，但沒有具體的細節，除此之外我們不能說什麼。很可能，它與父元素之一的定位有關：http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html – mercator 2010-04-12 21:21:11

刪除了以前的評論。我已經更新了這個問題，以包含HTML/CSS樣本，不包括元信息。或者Dreamweaver引入的JS文件（AC_RunActiveContent.js）。 CSS被安排爲匹配HTML的層次結構 - 實際CSS中的選擇器被編寫爲尊重CSS級聯。 – Brett 2010-04-12 23:09:41

您是否試過從video-container中刪除position: relative和z-index: 1？

那些屬性真的只會增加問題，而不會減少它們。我以爲你可能需要他們，因爲在頁面的其餘部分有很多定位，但似乎並非如此。

來源

2010-04-12 23:36:51 mercator

刪除這兩個CSS屬性並不能解決問題 - 在IE7中，JW播放器保留在頁腳欄之上。這可能也可能不是幫助，但是當我向視頻容器添加邊框時，它會在菜單欄下方正確顯示，而視頻播放器本身則顯示在頂部。 – Brett 2010-04-15 20:25:35

我知道我在這裏比賽遲到了，但我想我會在那裏發現，在你的嵌入標籤中放置wmode =「transparent」可以幫助解決這個問題，因爲它在某種程度上迫使Flash遵守z-index（再次，我使用了「不知何故」這個詞，因爲關於爲什麼這是稀少的文檔 - 至少從我的經驗來看，有稀疏的文檔）。

因此無論如何，將wmode =「transparent」放入您的嵌入中，然後從包含視頻的實際div中移除z-index和定位。

這應該工作。如果沒有，那麼它可能會是一個不同的問題，因爲我剛纔有同樣的問題，並且這兩件事情爲我解決了這個問題。

我希望有幫助。

哦，你可能會考慮檢查了這一點（它幫助我很大的時間）：http://manisheriar.com/blog/flash_objects_and_z_index

凱西J.Burk

來源

2010-06-18 14:01:37

謝謝！這工作，爲我節省了很多時間。除了Firefox以外，我在所有瀏覽器中都遇到了問題（IE瀏覽器等）。我還需要將我的Fusioncharts.js文件從版本：vFree.1.2升級到版本：1.2.4。 – 2012-02-14 16:04:22

在IE7上播放其他任何內容的Flash視頻

回答

相關問題