Question

我有这个小提琴，点击一个按钮，iframe从左侧滑入，然后播放，当它滑回时停止。

我对如何在HTML5视频术语中应用此内容感到有点迷茫。（基本上是HTML5视频而不是iframe）我希望视频在点击和播放时滑入，然后在点击和滑出时暂停。

任何帮助都会受到赞赏，或者有人可以指出我如何实现这一目标的正确方向。

HTML

<div class="wrapper">

    <div class="content-wrapper">

        <a href="#" id="play-video">Play Video</a>

           <div class="padLeft">
               <p>Paragraph Goes Here</p>
                 <h3>Play Video</h3>
           </div>

   </div>    

    <div class="full-video">

        <iframe id="video" src="//www.youtube.com/embed/vIu85WQTPRc" frameborder="0" allowfullscreen></iframe>

    </div>  

</div>

CSS

.wrapper {
    width: 100%;
    height: 400px;
    position: absolute;
    overflow: hidden;
    margin: 0;
    padding:0;
    z-index: 1;
}

.content-wrapper {
    position: absolute;
    z-index: 999;
    background: red;
    bottom: -90px;
    width: 100%;
    -webkit-transition: bottom 1s;
    -moz-transition: bottom 1s;
    transition: bottom 1s;    
}

#play-video {
    position: absolute;
    background-color: blue;
    z-index: 999;
    cursor: pointer;
}

.full-video {
    position: absolute;
    left: -600px;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    transition: left 1s;  
}

.full-video iframe {
     width: 100%;
     height: 100%; 
}

JS

var clicked=false;
var src=$("#video")[0].src;
$("#play-video").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".full-video").css({"left": "-600px"});
        $("#video")[0].src = src;
        ev.preventDefault();
    }
    else
    {
        clicked=true;
        $(".full-video").css({"left": "0"});
        $("#video")[0].src = src+"?autoplay=1";
        ev.preventDefault();
    }
});

从左侧滑入HTML5视频并在幻灯片上播放/暂停？

0 个答案: