响应性可扩展横幅中的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

为什么对相同的输入元素同时有内联单击和jQuery单击处理程序？您可以在几行代码中完成所有这些。

在这两种情况下，只需在切换中调用$('video').get(0).play()和$('video').get(0).pause()即可。