首选,需要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)播放。