视频通过javascript被隐藏，但已经开始播放(自动播放模式），即使是's不可见

video gets hidden via javascript but already starts to play (autplay-mode) even it's not visible?

本文关键字：模式 即使是 自动播放 播放 javascript 隐藏 视频 开始      更新时间：2024-03-04

我想找到一个简单的方法，通过隐藏视频并在点击预览图像后立即显示，为我的博客中的视频获取自定义预览图像。用户DominicGreen用以下代码帮助我开始使用它。问题是：页面加载后，视频已经开始在自动播放模式下播放（即使它是隐藏的），但我想在点击预览图像后立即开始自动播放。。。

这是我的代码：

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

您将需要使用，

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那样流畅，但会成功的。

如果您不想使用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代码的click事件中，只需将数据iframe-src值设置为iframe-src:

$(this).parent().find(".video iframe").attr("src", $(this).attr("data-iframe-src"));
相关文章：