0

上の画像を下のプレーヤーに配置しようとしています。

これは私がこれまでに得たものです。gif を埋め込みビデオの上に配置して、再生時に読み込みを開始できるようにしたいと考えています。

 <div id="video"><img src="images/hand.gif" width="500" height="281" />

 <iframe src="http://player.vimeo.com/video/66167649" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 </div>
4

2 に答える 2

1

やろうとしていることに応じて、JS を使用して、画像がクリックされるまでビデオを非表示にすることができます。

<a href="#" id="video" class="show_hide">
    <img src="images/hand.gif" width="500" height="281" />
</a>

<div class="slidingDiv">
    <iframe src="http://player.vimeo.com/video/66167649" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

必ずjQueryを参照してください

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>

JS

<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    $("#video").hide();
    });

});

</script>
于 2013-08-01T11:53:30.763 に答える
0

私は何が間違っているのかを理解することになりました。したがって、基本的には、あなたが述べたようにJSを使用しない限り、それを行うことはできません。また、使用する vimeo ビデオの autoplay 変数が 1 であることを確認してください。それは決して再生されません。 

  <div id="video"><a href="#" id="showVideo"><img src="images/hand.gif" width="647" height="366" />


   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"          type="text/javascript"></script>

   <script type="text/javascript">


    $('#showVideo').click(function () {
    $('#video').fadeIn().html('<iframe src="http://player.vimeo.com/video/66167649?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="647" height="366" align="middle" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
$("#showVideo").hide()

  });
  </script>
于 2013-08-04T12:10:22.327 に答える