<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false" %>
<%
// 获取视频播放名称
String src = request.getParameter("name");
String name = "video\\"+src;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>视频查看</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
*{margin: 0px;padding: 0px;}
/* 视频样式 用来控制视频全屏铺满显示 */
.vid-wrapper{
width:100%;
position:relative;
padding-bottom:56.25%; /*需要用padding来维持16:9比例,也就是9除以16*/
height: 0;
}
.vid-wrapper video{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%
background-size: cover;
overflow: hidden;
}
</style>
</head>
<body>
<div class="vid-wrapper">
<video class="video" id="vs" onclick="ps()" controls preload controls="controls" autoplay="autoplay">
<source src="<%=name %>"></source>
</video>
</div>
<script type="text/javascript">
/* 单击暂停和播放视频 进来播放设置 i =1 如果进来是暂停播放状态，设置i =0 */
var i = 1;
function ps(){
var vs = document.getElementById("vs");
if(i){
// 暂停视频
vs.pause();
i--;
}else{
// 播放视频
vs.play();
i++;
}
}
</script>
</body>
</html>
不足之处，多多指导。
