<%@ 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>
不足之處，多多指導。免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
