禁止拖動滾動條的mp4播放器

首選,需要Video-js的css:
http://download.csdn.net/detail/sunroyi666/9588419

JSP代碼如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Video</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is Restfil WebService Test">
    <link rel="stylesheet" href="./styles/video/video-js.css"/>
    <script type="text/javascript" src="./scripts/jquery-1.8.3.js""></script>
  </head>
  
  <body>
  	<div>
  		<button id="videojs">videojs</button>
  		<button id="http">Http:WindowsMediaPlayer</button>
  		<button id="mms">Mms:WindowsMediaPlayer</button>
  	</div>
  	
	<div id="divVideojs" class="videos-carousel carousel slide">
		<video id="video4ks" class="video-js vjs-default-skin" controls preload="none" width="100%" height="100%"
			poster="./images/play.jpg"
			data-setup='{"language":"zh_CN"}'>
	    	<source src="./upload/nba.mp4" type='video/mp4' />
	    	<p class="vjs-no-js">請檢查瀏覽器是否允許運行javascript插件!
		    	<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
			</p>
	 	</video>
	</div>
	
	<div id="divHttp" align="center" style="height: 510px;margin-top:20px;margin-bottom:20px;">
		<object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="670" height="500" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
			<param name="FileName" value="Video">
			<param name="AutoStart" value="true">
			<param name="ShowControls" value="true">
			<param name="BufferingTime" value="2">
			<param name="ShowStatusBar" value="true">
			<param name="AutoSize" value="true">
			<param name="InvokeURLs" value="false">
			<param name="AnimationatStart" value="1">
			<param name="TransparentatStart" value="1">
			<param name="Loop" value="1">
			<embed type="application/x-mplayer2" src="http://localhost:8080/ProjectTest/upload/nba.wmv" name="MediaPlayer" autostart="1" showstatusbar="1" showdisplay="1" showcontrols="1" loop="0" videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="670" height="500"></embed>
		</object>
	</div>
	
	<div id="divMms">
		<embed type='audio/wav' pluginspage='http://www.microsoft.com/windows/mediaPlayer/' id='mmsMediaPlayer' src='' name='player' width='0' height='0' volume='100'></EMBED>
	</div>
  </body>
  
  <script type="text/javascript">
  	$(function(){
	  	chgVideo(0);
  		
  		$('#videojs').click(function(event){
  			chgVideo(1);
            event.preventDefault();	
  		});
  	
  		$('#http').click(function(event){
  			chgVideo(2);
            event.preventDefault();	
  		});
  		
  		$('#mms').click(function(event){
  			chgVideo(3);
            event.preventDefault();	
  		});
  		
  		function chgVideo(i){
  			if (i==0 || i==1)
  			{
	  			document.getElementById("divVideojs").style.display = "block";
	  			document.getElementById("divHttp").style.display = "none";
	  			document.getElementById("divMms").style.display = "none";  
  			}
  			else if (i==2)
  			{
	  			document.getElementById("divVideojs").style.display = "none";
	  			document.getElementById("divHttp").style.display = "block";
	  			document.getElementById("divMms").style.display = "none";  
  			}
  			else if (i==3)
  			{
	  			document.getElementById("divVideojs").style.display = "none";
	  			document.getElementById("divHttp").style.display = "none";
				document.getElementById("mmsMediaPlayer").src="mms://localhost:8080/ProjectTest/upload/nba.wmv";
	  			document.getElementById("divMms").style.display = "block";
  			}
  		}
  	});
  </script>
</html>

上例中用了3種方法,
第一種是用VideoJs不能拖動進度條的方式,
第二種是用系統自帶的WindowsMediaPlayer進行播放,
第三種是打開外部的播放器(WindowsMediaPlayer)播放。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章