隐藏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后开始加载

回答

相关问题