點擊輪播圖圖片 播放視頻

在我們網頁制作中，有的客戶就需要輪播圖點擊來實現播放視頻的效果，今天我們來寫一個

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