有时您想嵌入多个 AdSense YouTube 视频同一页，例如前十名列表。它也可以在网站评论或者论坛部分的嵌入播放器中自动让链接指向 YouTube。但 YouTube 播放器默认运行有个问题（除非某人知道技巧并和我们一起分享）：一点击播放，视频就一直缓冲；意味着如果含有10个视频的页面，您点击第一个视频，但是然后决定宁可去看第二个视频。即使当您已经停止第一个视频，第二视频也会导入得很慢（对于后来点击的视频来说，也会越来越慢）。您能做的就是重新载入完整的 HTML 页面，但那也不是很有效。
一种解决方法是使用一些程序或者博客插件，建立一个特殊扩展的“+ 显示该视频”链接，类似于我们博客论坛那样。因此你不会马上看见 YouTube 播放器。但你需要点击后才展开第一个。你可以做的是先添加个空白“div”层元素，使用 JavaScript。当展开 div 时，用嵌入代码填充它（你可以设定视频自动播放，以让用户不需要在展开后再一次点击）。一展开，视频就开始缓冲。但是现在旧链接的地方会显示可选的链接，例如“- 隐藏该视频”。在隐藏上方，你可以再次“删除” div 元素的内容。
这里有操作摘录。首先是“显示视频”链接的 HTML 代码： <p class=”expander” id=”expander1″><a href=”javascript:showForumVideo(1, ‘7gntV6AePOM’)”>+ Show video</a></p>
第一个参数（值为“1”）表示整页有多少视频。第二个参数为 YouTube 视频代号(”7gntV6AePOM”)。您可以写个像这个空元素那样的，如下：
<p class=”expandee” id=”expandee1″> </p>
您在 CSS 中设置 “expandee” 类为 “display: none”。现在 JS 文件中，写入如下的代码（注意：expand / collapse 函数也对于其他有用，因此分开列出他们）：
function showForumVideo(n, videoId)
{
expand(n);
var elm = document.getElementById("expandee" + n);
if (elm) {
elm.innerHTML = "<a href="javascript:hideForumVideo(" mce_href="javascript:hideForumVideo(" + n + ", '" + videoId + "')">- Hide video</a><br />" +
"<object style="width: 500px; height: 412px"><param name="movie" " +
"value="http://www.youtube.com/v/" + videoId + "&autoplay=1"></param>" +
"<embed src="http://www.youtube.com/v/" mce_src="http://www.youtube.com/v/" + videoId + "&autoplay=1" type="application/x-shockwave-flash" " +
"style="width: 500px; height: 412px"></object>" +
"<br /><a href="http://youtube.com/watch?v=" mce_href="http://youtube.com/watch?v=" + videoId + "" style="color: #888; font-size: 85%">" +
"youtube.com/watch?v=" + videoId + "</a>";
}
}function hideForumVideo(n, videoId)
{
var elm = document.getElementById("expandee" + n);
if (elm) {
elm.innerHTML = " ";
}
collapse(n);
}
function expand(n)
{
showElm("expandee" + n);
hideElm("expander" + n);
}
function collapse(n)
{
showElm("expander" + n);
hideElm("expandee" + n);
}
function showElm(name)
{
var elm = document.getElementById(name);
if (elm) { elm.style.display = "block"; }
}
function hideElm(name)
{
var elm = document.getElementById(name);
if (elm) { elm.style.display = "none"; }
}
不同浏览器中，测试有效。或许有更好调整它的方法，但是这会让您马上开始。
[来自 Spreeblick 和 Ionut 的技巧！]
Recent Comments