我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载
Posted
技术标签:
【中文标题】我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载【英文标题】：The Youtube video in my hidden DIV only starts to load after the DIV is shown 【发布时间】：2010-11-12 12:14:17 【问题描述】：我的页面上隐藏的 DIV 中有一个 Youtube 剪辑。
页面加载后，我希望视频在后台安静地加载，这样当用户单击“取消隐藏”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 ><param value="http://www.youtube.com/v/UyyjU8fzEYU&ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&ap=%2526fmt%3D22"></object>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：是的。使用visibility:hidden 而不是display:none。 display:none 表示该元素不会作为 DOM 的一部分呈现，因此在显示属性更改为其他内容之前不会加载它。 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 ><param value="http://www.youtube.com/v/UyyjU8fzEYU&ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&ap=%2526fmt%3D22"></object>
</div>
</body>
</html>
【讨论】：
【参考方案2】：我认为您还需要展示视频。 您是否注意到网页中嵌入的视频在滚动进入视图之前甚至不显示预览静态图像？
我认为你会在那个问题上与 YouTube 的算法作斗争。他们的目标可能是在用户点击之前不加载视频。
【讨论】：
【参考方案3】：您可以在 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 ><param value="http://www.youtube.com/v/UyyjU8fzEYU&ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&ap=%2526fmt%3D22"></object>
</div>
</body>
</html>
【讨论】：
以上是关于我隐藏的 DIV 中的 Youtube 视频仅在显示 DIV 后才开始加载的主要内容，如果未能解决你的问题，请参考以下文章
我可以在youtube上上传视频并限制它仅在我的网站上查看吗？
iOS 14 上的 WKWebView 仅在显着延迟后加载内容