视频通过javascript隐藏，但即使看不到也已经开始播放(autplay模式)? [英] video gets hidden via javascript but already starts to play (autplay-mode) even it's not visible?
问题描述
我想找到一种简单的方法，通过隐藏视频并使视频在单击预览图像后立即可见，从而为博客中的视频获取自定义预览图像.用户Dominic Green通过以下代码帮助我开始使用.问题是:在页面加载后，视频已经在自动播放模式下立即开始播放(即使它是隐藏的)，但是我想在单击预览图像后立即开始自动播放...
i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dominic Green helped me to get it started with the following code. the problem is: the video already starts to play (even if it is hidden) in autoplay-mode right after the page load but i want to have the autoplay to start right after click on the preview-image...
这是我的代码:
<!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&byline=0&portrait=0&color=a80101&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 API或vimeo API，建议您将iframe src设置为空，并在单击加载程序div时进行设置.所以
If you don't want to use youtube API or vimeo API, I'd suggest you have iframe src empty and set it when the loader div is clicked. so
我会用
<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事件中，只需将data-iframe-src值设置为iframe src:
then in click event of js code, just set the data-iframe-src value to iframe src:
$(this).parent().find(".video iframe").attr("src", $(this).attr("data-iframe-src"));
这篇关于视频通过javascript隐藏，但即使看不到也已经开始播放(autplay模式)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
