所以我的问题是这个,我需要显示封面图像,实际视频将被隐藏。一旦有人点击图像,视频将变为可见,应自动开始播放。我的代码在这里http://jsfiddle.net/Vq8Wr/。这适用于Chrome,但不适用于任何其他浏览器。任何解决方案都将不胜感激
代码如下
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
.hide{
display:none
}
img{
width:500px;
}
</style>
<iframe class="hide" src="http://player.vimeo.com/video/59372982?api=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<img src="http://allthingsd.com/files/2011/05/clouds-1259.jpg" id="video-cover" >
<script>
$("#video-cover").click(function(){
$(this).hide();
var f = $('iframe'),
url = f.attr('src').split('?')[0];
f.show();
var data = { method: "play" };
f[0].contentWindow.postMessage(JSON.stringify(data), url);
})
</script>
答案 0 :(得分:2)
请改为尝试:
.hide{
position : absolute;
left : -99999px;
}