0

好的，很难说（对不起我的英语不好）......我想为我的嵌入式媒体（youtube 和其他东西）创建一个自定义预览图像......

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

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

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

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

多谢！

4

2 回答 2

2

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

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);
});​
于 2012-07-25T15:00:30.600 回答
2

如果这只是出于显示原因而不是性能，那么加载两个 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();
于 2012-07-25T15:03:47.117 回答