点击轮播图图片 播放视频

在我们网页制作中，有的客户就需要轮播图点击来实现播放视频的效果，今天我们来写一个

轮播的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;}