通过点击隐藏DIV并通过JavaScript显示另一个DIV？(Hide a DIV via click and make another one visible instead via JavaSc

通过点击隐藏DIV并通过JavaScript显示另一个DIV？(Hide a DIV via click and make another one visible instead via JavaScript?)

好吧，很难说（抱歉我的英语不好）...我想为我的嵌入式媒体创建自定义预览图像（你管和东西）......

这是我认为它可以工作的方式：

我有一个带有视频预览图像和自定义播放按钮的DIV 在点击该图像/按钮之后，DIV隐藏了...... ...使用原始的iframe嵌入代码显示另一个DIV而不是那个 视频自动启动

这是一个小例子（但我不知道究竟是怎么做的......通过fancybox？）： http ： //www.crackajack.de/2012/07/25/the-mayor-of-london-introduces-the -奥运会/

任何想法我怎么能“轻松”做到这一点？

非常感谢！

ok, it's hard to tell (sorry for my broken english)... i want to create a custom preview-image to my embedded media (you-tube and stuff)...

here's how i think it could work:

i have a DIV with a preview-image of a video and a custom play-button right after click on that image/button the DIV hides and... ...another DIV appears instead of that with the original iframe-embed-code the video starts automatically

here's a little example (but i don't know how exactly that was done.. via fancybox?): http://www.crackajack.de/2012/07/25/the-mayor-of-london-introduces-the-olympic-games/

any ideas how i could do that "easily"?

thanks alot!

最满意答案

如果这只是出于显示原因而不是性能，则可能最容易加载两个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();

if this is just for display reasons and not performance then its probably easiest to load both divs, with your loading div positioned absolutely over the video and the video hidden. Then once you click you can use the youtube api to auto play.

The hide and show part is here http://jsfiddle.net/TUMcm/ and the youtube api is here https://developers.google.com/youtube/js_api_reference

BIT MORE INFO

SO if your player was this

<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">

In the click function you would put something like

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