视频通过javascript隐藏但已经开始播放（自动播放模式），即使它不可见？答案

【问题标题】：video gets hidden via javascript but already starts to play (autplay-mode) even it's not visible?视频通过javascript隐藏但已经开始播放（自动播放模式），即使它不可见？
【发布时间】：2012-07-24 16:21:21
【问题描述】：

我想找到一种简单的方法，通过隐藏它们并在单击预览图像后立即使它们可见，从而在我的博客中为我的视频获取自定义预览图像。用户 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 -->

【问题讨论】：

标签： javascript jquery video embed autoplay

【解决方案1】：

如果您不想使用 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"));

【讨论】：

【解决方案2】：

你需要使用，

YouTube JavaScript Player 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 那样流畅，但可以解决问题。

【讨论】：

我已经包含了使用 youtube javascript player api 的链接。继续努力，如果你发现任何问题，请告诉我:)
这可能是语言问题，但我不明白你的意思？！？你是怎么做到的？你能给我一个javascript的例子吗？