响应式可扩展横幅中的HTML 5视频

Question

我创建了一个可扩展的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标签最初是用来在图像中淡入淡出的，也许可以在其中添加一些东西来自动播放和停止视频，或者可能会出现在按钮上？（）

提前感谢您的帮助！

Answer 1

为什么同一个输入元素同时有内联onclick和jQuery点击处理程序？您可以在几行代码中完成所有这些操作。

在任何一种情况下，只需在切换中调用$('video').get(0).play()和$('video').get(0).pause()。