是否有可能將圖像隱藏在圖像後面？

本質上，在頁面加載時，我想要一個視頻隱藏在圖像後面（我想這可以通過定位div來完成）。是否有可能將圖像隱藏在圖像後面？

我希望視頻在用戶點擊視頻後面隱藏的圖片時開始播放。這應該可以通過一些JavaScript/CSS來實現。

我真正要問的是，有沒有人知道這個的任何例子，或者有可能與一些jQuery/Mootools擴展...？我不希望使用Flash，因此它適用於iPhone/iPad。

謝謝

來源

2010-08-11 Jason

，我們談論的是什麼類型的影片？我知道可以隱藏Flash視頻，但它不適用於WMV/ASF等。 – Sebs 2010-08-11 14:49:45

這通常在嵌入Quicktime影片時完成。如果您可以設置其海報框架，則可以直接使用視頻完成。通常通過在屏幕上將圖像放置在與視頻相同的位置並在它們之間進行切換來完成。代碼可能看起來像這樣。

HTML

...

<embed id="video" style="display: none;">...<embed>

<img id="poster" onclick="switchToVideo()">

...

function switchToVideo(){

document.getElementById('video').style.display = "block";

document.getElementById('poster').style.display = "none";

document.getElementById('video').Play();

}

來源

2010-08-11 14:57:38

謝謝 - 這是一個非常簡單而有效的解決方案。我將它與YouTube JS API結合使用。我想調查也使用z-index方法。雖然我覺得這可能不是那麼簡單，因爲YouTube視頻應該加載並調用它的「onReady」函數，在這種情況下它不會執行，因爲它沒有被顯示。我會及時通知你的。 – Jason 2010-08-11 21:03:12

像你描述的（我不知道確切的語法），只需將具有較高的Z級以上的圖像任何你想要隱藏並在JavaScript中處理它的onClick方法。

來源

2010-08-11 14:58:46 Steven

你確定這有效嗎？ Prot0的評論表明，它不適用於WMV視頻和可能的QT視頻。蘋果的電影預告片網站使用Peter建議的JavaScript/css隱藏/可見技術。 – 2010-08-11 15:38:31

你不會明確地隱藏視頻。只需在其上放置一個圖像即可。 – Steven 2010-08-11 15:47:41

這就是我要說的。許多嵌入式視頻控件不尊重z-index。這就是爲什麼你不能在嵌入式視頻上放置圖像或者在嵌入式視頻上寫入文本。 – 2010-08-12 00:25:22

爲了讓堆疊與視頻一起工作，您需要將wmode變量添加到對象/嵌入中。另外，爲了堆疊，您需要在要放置在另一個之上的元素上使用position：absolute。將它們都包含在一個相對的容器中，並使需要上面的z-index更高。

以下是添加的wmode到視頻的例子：

<object width="400" height="300"> 
    <param name="movie" value="" /> 
    <param name="wmode" value="transparent"> 
    <!--[if !IE]>--> 
    <embed src="" width="400" height="300" wmode="transparent" menu="false"> 
    <!--<![endif]--> 
</object>

來源

2010-08-11 15:30:34 UpHelix

我沒有任何WMV視頻可以使用它，但有一些建議：「wmode」本身不起作用。但有一個修復使用''：http://www.sitepoint.com/forums/showthread.php?t=543926 – 2010-08-12 00:29:36

是否有可能將圖像隱藏在圖像後面？

回答

相關問題