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()。

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

1 个答案: