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

轮播的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="{$votitlepic}" width="100%"/></a></div>
                <else/>
                <div class="pic"><img src="{$votitlepic}" width="100%"/></div>
                </if>
            </li>
        </volist>
    </ul>
<div class="video" id="videobox">
    <!-- <img src="{$culturedatatitlepic}" /> -->
</div>
</div>

JS代码

<!-- 视频播放 -->
<script type="text/javascript">
    $(function(){
        var vurl = '{$video}',
            flag = 0;
        if ((navigatoruserAgentindexOf('MSIE') >= 0) && (navigatoruserAgentindexOf('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();
         documentgetElementById('myvideo')play();
         // $('#myvideo')play();
       })
       $('#videobox')find('close')click(function(event){
            eventstopPropagation();
            $('#videobox')hide();
            documentgetElementById('myvideo')pause();
       })
       documentgetElementById('myvideo')onclick = function(){
            if(flag==0){
                thispause();
                flag = 1;
            }else{
                thisplay();
                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-closepng) no-repeat center;z-index: 10001;}

以上就是关于网页中banner处，不是静态图片轮播，而是一段视频的播放，效果是怎样实现的！全部的内容，包括:网页中banner处，不是静态图片轮播，而是一段视频的播放，效果是怎样实现的！、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！