2014-02-05 40 views
0

我基本上從jQuery網站上直接複製了手風琴的例子,它在所有瀏覽器中都能正常使用文本,但是,將我的視頻標記和對象標記(用於回退到Flash)INSIDE的任何手風琴部分將不再顯示視頻(除非您將鼠標移動到視頻應該在的空白區域上,右鍵單擊並選擇播放 - 它的工作原理)。海報圖片將不會顯示在部分內。在IE8和IE9中使用flash或HTML5視頻的jQuery UI手風琴問題

如果我擺脫了手風琴,那麼視頻顯示&播放良好(IE9中的HTML5和IE8中的Flash)。顯然,這是手風琴問題,而不是我的球員標記。

這是我正在使用的代碼。

<!doctype html> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!-- tried this with no luck for IE8 and IE9 --> 
    <title>jQuery UI Accordion - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
     $(function() { 
      $("#accordion").accordion(); 
     }); 
    </script> 
</head> 
<body> 
    <div id="accordion"> 
     <h3>Section 1</h3> 
     <div> 
      <p> 
       Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
      </p> 
     </div> 
     <h3>Section 2</h3> 
     <div> 
      Hello there! 
      <video id="WebVidPlayer6" width="640" height="360" controls="controls" poster="IM/mywebsite-TacTiles-Commercial-Oct-2011.jpg" preload="metadata"> 
       <source src="IM/mywebsite-TacTiles-Commercial-Oct-2011.webm" type="video/webm" /> 
       <source src="IM/mywebsite-TacTiles-Commercial-Oct-2011.ogv" type="video/ogg" /> 
       <source src="IM/mywebsite-TacTiles-Commercial-Oct-2011.mp4" type="video/mp4" /> 
       <object type="application/x-shockwave-flash" data="im/player_flv_maxi.swf" width="640" height="360" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"> 
        <param name="movie" value="im/player_flv_maxi.swf" /> 
        <param name="width" value="640px" /> 
        <param name="height" value="360px" /> 
        <param name="allowFullScreen" value="true" /> 
        <param name="play" value="false" /> 
        <param name="loop" value="false" /> 
        <param name="menu" value="false" /> 
        <param name="quality" value="best" /> 
        <param name="scale" value="default" /> 
        <param name="wmode" value="opaque" /> 
        <param name="allowScriptAccess" value="sameDomain" /> 
        <param name="fullScreenAspectRatio" value="landscape" /> 
        <param name="FlashVars" value="configxml=flash_base_config.xml&amp;startimage=http%3a%2f%2fwww.mywebsite.com%2fim%2fmywebsite-tactiles-commercial-oct-2011.jpg&amp;flv=http%3a%2f%2fwww.mywebsite.com%2fim%2fmywebsite-tactiles-commercial-oct-2011.flv"></param> 
        <img src="im/mywebsite-tactiles-commercial-oct-2011.jpg" width="640" height="360" alt="Video" /><p>Your browser can’t play HTML5 video.<a href="im/mywebsite-tactiles-commercial-oct-2011.flv">Click Here</a> to download.</p> 
       </object> 
      </video> 

     </div> 
     <h3>Section 3</h3> 
     <div> 
      <p> 
       Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
      </p> 
      <ul> 
       <li>List item one</li> 
       <li>List item two</li> 
       <li>List item three</li> 
      </ul> 
     </div> 
     <h3>Section 4</h3> 
     <div> 
      <p> 
       Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
mauris vel est. 
      </p> 
      <p> 
       Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
inceptos himenaeos. 
      </p> 
     </div> 


    </div> 
</body> 
</html> 

在查看頁面源代碼,你可以看到代碼是完全一樣的。

(它看起來像jQueryUI手風琴沒有完全「顯示」什麼是在DIV除非它是純文本)

關於如何解決此問題有什麼建議?

+0

我試過這個使用jQuery(與出jQueryUI),我仍然堅持(沒有視頻,沒有海報圖像,但你可以右鍵單擊和視頻播放罰款)。 IE不會重新渲染隱藏並再次顯示的區域(即使源代碼顯示HTML)。難題! – MC9000

+0

行, IE8顯示海報,但不會播放Flash vid。 IE9不顯示海報,只有一個空白區域,但右鍵單擊並選擇播放,它播放HTML5視頻(可能存在HTML5問題) IE6,信不信由你,顯示海報並播放Flash VID。 所有3個版本播放獨立視頻罰款(外面的手風琴) - 去圖。 – MC9000

+0

這是一場噩夢!我想我只是使用瀏覽器檢測,如果他們使用任何版本的IE瀏覽器,他們會收到一條消息,請使用REAL瀏覽器。 – MC9000

回答

0

找到了解決方案。問題是jQuery本身以及它處理隱藏/顯示標籤的方式。 而不是寫我自己的JavaScript,我發現了一個手風琴從這個網站: http://sandbox.scriptiny.com/javascript-accordion/index.php

這是與containered項目(如視頻&對象標記)很好地扮演唯一的手風琴 - 在IE瀏覽器版本6或以上的偉大工程, Firefox,Safari,Chrome,Opera。 它沒有依賴於jQuery(但與jQuery很好地玩)