Question

好的，很难说（抱歉我的英语很糟糕）...... 我想为我的嵌入式媒体创建自定义预览图像（you-tube and stuff）......

这就是我认为它可以起作用的方式：

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

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

我怎么能“轻松”地做到这一点？

非常感谢！

Answer 1

这样的事情应该让你开始：

http://jsfiddle.net/lbstr/YdwEF/

由于您没有显示任何标记，因此我想知道如何进行标记：

<div class="container">
    <div class="preview">
        <!-- Some preview image here -->
    </div>
    <div class="media">
        <!-- Some embed code here -->
    </div>
</div>

使用这个CSS：

.container { position: relative; }
.container .preview, 
.container .media { width: 500px; height: 350px; position: absolute; top: 0; left: 0; }
.container .preview { background-color: blue; z-index: 2; }
.container .media { background-color: red; z-index: 1; }

这个JS（jQuery）：

$('.container .preview').click(function(){
    $(this).siblings('.media').css("z-index", 3);
});

Answer 2

如果这仅仅是出于显示原因而不是性能，则可能最容易加载两个div，您的加载div绝对位于视频上并隐藏视频。然后，一旦你点击，你可以使用youtube api自动播放。

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

BIT MORE INFO

如果您的播放器是这样的话

<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();

通过点击隐藏DIV并通过JavaScript显示另一个DIV？

2 个答案: