0

我想找到一种简单的方法，通过隐藏它们并在单击预览图像后立即使它们可见，从而在我的博客中为我的视频获取自定义预览图像。用户 Dominic Green 帮助我开始使用以下代码。问题是：视频已经在页面加载后立即以自动播放模式开始播放（即使它被隐藏），但我希望在单击预览图像后立即开始自动播放......

这是我的代码：

<!doctype html>  


<script type="text/javascript">
$(window).load(function(){
$(".video").hide();

$(".loader").click(function(){
$(this).hide();
$(this).parent().find(".video").show();
});
});  


    #container .post .postimg img{
        width:100%;
        height:auto;
        }
    #container .post .postvideo{
        position:relative;
        display:block;
        width:100%;
        height:430px;
        background-color:#0F3;
        }
        #container .post .postvideo .con{
            position:absolute;
            top:0;
            left:0;
            height:100%;
            width:100%;
            z-index:1;
            }
        #container .post .postvideo .video{
            background-color:#C00;
            }
            #container .post .postvideo .video iframe{
                width:100%;
                height:100%;
                }
        #container .post .postvideo .loader{
            background-color:#06C;
            }
        #container .post .postvideo .loader img{
            width:100%;
            height:100%;
            }


<div class="post">
    <div class="postvideo">
        <div class="con video">
            <iframe width="420" height="315" src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="con loader">
          <img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
      </div>
    </div>
</div><!--! end of .post -->

<div class="post">
    <div class="postvideo">
        <div class="con video">
        <iframe src="http://player.vimeo.com/video/29017795?title=0&amp;byline=0&amp;portrait=0&amp;color=a80101&amp;autoplay=1" width="460" height="259" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </div>
        <div class="con loader">
          <img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
      </div>
    </div>
</div><!--! end of .post -->

4

2 回答 2

0

您将需要使用，

YouTube JavaScript 播放器 API

或者，

把它作为 url ( autoplay off)

http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=0"

并单击按钮将 src 更改为

http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1"

这不会像 js api 那样流畅，但会成功。

于 2012-07-26T06:04:23.237 回答
0

如果您不想使用 youtube API 或 vimeo API，我建议您将 iframe src 设置为空，并在单击加载程序 div 时设置它。所以

我会用

<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>

和

<div class="con loader" data-iframe-src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1">

然后在 js 代码的点击事件中，只需将 data-iframe-src 值设置为 iframe src：

$(this).parent().find(".video iframe").attr("src", $(this).attr("data-iframe-src"));
于 2012-07-26T06:37:41.663 回答