1

だから私の問題はこれです.カバー画像を表示する必要があり、実際のビデオは非表示になります. 誰かが画像をクリックすると、ビデオが表示され、自動的に再生が開始されます。私のコードはここ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>
4

1 に答える 1

2

代わりにこれを試してください：

.hide{
   position : absolute;
   left     : -99999px;
}
于 2013-02-14T17:02:36.480 に答える