javascript - 通过点击隐藏一个 DIV 并通过 JavaScript 使另一个 DIV 可见？

Question

好吧，这很难说(抱歉我的英语很蹩脚)...我想为我的嵌入媒体(you-tube 等)创建自定义预览图像...

我认为它是这样工作的:

1. 我有一个带有视频预览图像和自定义播放按钮的 DIV
2. 点击该图像/按钮后，DIV 立即隐藏并且...
3. ...出现另一个 DIV，而不是带有原始 iframe-embed-code 的 DIV
4. 视频自动开始

这是一个小例子(但我不知道这是如何完成的......通过 fancybox？): http://www.crackajack.de/2012/07/25/the-mayor-of-london-introduces-the-olympic-games/

我有什么想法可以“轻松地”做到这一点吗？

非常感谢!

Answer 1

如果这只是出于显示原因而不是性能，那么加载两个 div 可能是最简单的方法，将加载的 div 绝对定位在视频上方并隐藏视频。然后，一旦您点击，您就可以使用 youtube api 自动播放。

隐藏和显示部分在这里 http://jsfiddle.net/TUMcm/ YouTube api 在这里 https://developers.google.com/youtube/js_api_reference

更多信息

如果你的玩家是这样的

<embed id="playerid" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="playerid" style="" src="http://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer" type="application/x-shockwave-flash">

在点击函数中，您可以输入类似的内容

var myPlayer = document.getElementById('playerid');
myPlayer.playVideo();