隱藏DIV中的Youtube視頻僅在顯示DIV後開始加載

我的頁面上隱藏DIV中有一個Youtube片段。隱藏DIV中的Youtube視頻僅在顯示DIV後開始加載

頁面加載後，我希望視頻在後檯安靜地加載，以便當用戶單擊按鈕以「取消隱藏」DIV時，視頻將準備就緒。

但我現在的方式，視頻開始只在用戶點擊按鈕後加載。

我可以在這裏修改視頻，讓視頻在後臺加載，然後根據按鈕點擊隱藏或顯示它嗎？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $("#show_video").click(function(){ 
      $("#hello").show(); 
     }); 
    }); 
    </script> 

</head> 

<body> 

<button id="show_video">Show The Video</button> 
<div id="hello" style="display:none;"> 
<object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22"></object> 
</div> 


</body> 
</html>

來源

2009-07-21 isayno

是的。使用visibility:hidden而不是display:none。 display:none表示該元素不是作爲DOM的一部分呈現的，因此只有在display屬性更改爲其他內容時纔會加載該元素。 visibility:hidden加載元素，但不顯示它。

試試這個：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $("#show_video").click(function(){ 
       $("#hello").css('visibility','visible'); 
      }); 
     }); 
     </script> 

    </head> 

    <body> 

    <button id="show_video">Show The Video</button> 
    <div id="hello" style="visibility:hidden;"> 
    <object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22"></object> 
    </div> 


    </body> 
    </html>

來源

2009-07-21 01:23:22 zombat

我覺得你還需要顯示視頻。你有沒有注意過網頁中的嵌入視頻，他們甚至不顯示預覽靜態圖像，直到他們滾動查看？

我認爲你會反對YouTube的算法。它的目標可能不是加載視頻，直到用戶點擊它們。

來源

2009-07-21 01:28:22

你可以在jquery中簡單的使用show（）和hide（）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $("#hello").hide(); 
     $("#show_video").click(function(){ 
      $("#hello").show(); 
     }); 
    }); 
    </script> 

</head> 

<body> 

<button id="show_video">Show The Video</button> 
<div id="hello" > 
<object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22"></object> 
</div> 


</body> 
</html>

來源

2014-02-05 06:16:12 ahkeno

隱藏DIV中的Youtube視頻僅在顯示DIV後開始加載

回答

相關問題