0

エキスパンドに動画を含む、エキスパンド可能な HTML5 バナーを作成しました。バナーの展開ボタンがクリックされたときにビデオが自動再生され、閉じるボタンがクリックされると再生が停止するようにしたいと思います。これまでの私のコードは次のとおりです。

 <div class="ad_div2">
           <input type="button" value="EXPAND"    onclick="this.value=this.value=='EXPAND'?'CLOSE':'EXPAND'; fade(this);" class="bt"    style="background-color:#000000; color:#ffffff; ">
           <script>
            $(function() {  
$(".bt").click(function() {  
    $(".ad_div2").toggleClass("ad_change1");  
});  
});
           </script>   
  <video src="trailer_placeholder.mp4" controls style="width:70%; height:auto;            position:relative; margin-top:13%; margin-bottom:0px; margin-left:5%;"></video>
       </div></div>

追加の Javascript を次に示します。

    <script type="text/javascript">
    function fade(btnElement) {
        if (btnElement.value === "EXPAND") {
            document.getElementById("myImg").className = "fade-out";

        }
        else {
            document.getElementById("myImg").className = "fade-in";

        }
    }
</script>

CSS は次のとおりです。

    #myImg
     {
        -webkit-transition: opacity 0.5s ease-in;
        -moz-transition: opacity 0.5s ease-in;
        -o-transition: opacity 0.5s ease-in;
        opacity:0;
        padding-left:0;
        margin-top:0;
        width:85%;
        height:auto;
    }
    #myImg.fade-out
    {
        opacity:0;
    }
    #myImg.fade-in
    {
        opacity:1;
    }

 .ad_div2
  {
width:100%;
height:100px;
background-color: #000000;
z-index:0;
border:#000000 solid 2px;
background-image:url(i/avengers_logo.jpg);
background-position:center top;
background-repeat:no-repeat;
overflow:hidden;
-webkit-transition: width 2s ease, height 1s ease;  
 -moz-transition: width 2s ease, height 1s ease;  
 -o-transition: width 2s ease, height 1s ease;  
 -ms-transition: width 2s ease, height 1s ease;  
 transition: width 2s ease, height 1s ease;  
  }

   .ad_change1
    {
width:100%;
height:538px;
background-image:url(i/city_bg.png);
    }

   .content1
   {
width:80%;
float:left;
   }

  .content2
   {
width:20%;
float:right;
margin-left:0px;
margin-top:40px;
   }

それは近づいています - myImg タグはもともと画像をフェードインするために使用されていました。おそらく、ビデオを自動再生して停止するために何かを追加することができますか、それともおそらくボタンにあるでしょうか? ()

助けてくれてありがとう！

4

1 に答える 1

1

同じ入力要素に対してインラインの onclick と jQuery のクリック ハンドラーの両方があるのはなぜですか? これらすべてを数行のコードで実行できます。

どちらの場合でも、トグルで$('video').get(0).play()andを呼び出すだけです。$('video').get(0).pause()

于 2013-08-14T20:36:50.513 に答える