网页中banner处，不是静态图片轮播，而是一段视频的播放，效果是怎样实现的！

 我来答

1个回答

#热议# 上班途中天气原因受伤算工伤吗？

大前端
2017-03-09 · TA获得超过260个赞

知道小有建树答主

回答量：268

采纳率：100%

帮助的人：83万

我也去答题访问个人页

关注

展开全部

轮播的HTML如下：注意container CLASS样式必需要写相对定位：position: relative;

<div class="container">
    <ul>
        <volist name="getBannerImg" id="vo">
            <li>
                <if condition="CONTROLLER_NAME eq 'Listing'">
                <div class="pic"><a href="javascript:;" id="video-btn"><img src="{$vo.titlepic}" width="100%"/></a></div>
                <else/>
                <div class="pic"><img src="{$vo.titlepic}" width="100%"/></div>
                </if>
            </li>
        </volist>
    </ul>
<div class="video" id="videobox">
    <!-- <img src="{$culturedata.titlepic}" /> -->
</div>
</div>

JS代码

<!-- 视频播放 -->
<script type="text/javascript">
    $(function(){
        var vurl = '{$video}',
            flag = 0;
        if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
             $('#videobox').append("<div class='close'></div><embed src='' width='785px' height='100%'  allowfullscreen='true'  wmode='transparent'></embed>")
             $('#videobox').find('.close').css('top',-36);
       }
       else{
          $('#videobox').append("<div class='close'></div><video src='' width='auto' height='530' controls='controls' id='myvideo'></video>")
       }
       $('#videobox').children('video').attr('src',vurl);
       $('#videobox').children('embed').attr('src',vurl);
       $('#video-btn').click(function(){
         $('#videobox').show();
         document.getElementById('myvideo').play();
         // $('#myvideo').play();
       })
       $('#videobox').find('.close').click(function(event){
            event.stopPropagation();
            $('#videobox').hide();
            document.getElementById('myvideo').pause();
       })
       document.getElementById('myvideo').onclick = function(){
            if(flag==0){
                this.pause();
                flag = 1;
            }else{
                this.play();
                flag = 0
            }
       }
    })
</script>

部份 CSS

.slide .container {height: 500px;overflow: hidden;position: relative;}
.container .video {height: 442px;margin-top: 6px;position: fixed;top: 40%;left: 25%;margin-top: -221px;display: none;z-index: 10000;}
.container .video .close {width: 36px;height: 36px;position: absolute;top: 5px;right: 140px;background: url(../img/video-close.png) no-repeat center;z-index: 10001;}