嗨，我无法从系统位置播放 jsp 中的视频文件。但是，如果我将视频文件(例如.mp4)放在网络内容下，并且只需在jsp中使用带有文件名的视频标签，如下所示，它将播放。 下面的代码不起作用
src="C：/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4">
当我使用以下格式时，我可以播放视频
src="video/example.mp4"; 视频文件夹位于 WEB-INF 下
另一个问题是当用户点击(x)或点击模态之外的任意位置时，模态关闭，但视频在模态后面播放不可见。如何在后台暂停或关闭视频？
完整的代码在视频下面
.jsp
<%@page import="java.util.ArrayList"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/modal.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/hover.css" media="screen" />
</head>
<body>
<h2>Video Popup</h2>
<!-- Trigger/Open The Modal -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="dcont" class="dropdown-content">
<%
String[] arr=new String[10];
arr[1]="C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4";
arr[2]="video/sample.mp4";
arr[3]="video/example.mp4";
%>
<a>
<%for(int i=1;i<4;i++){%>
<input id="myBtn<%=i%>" onclick="javascript:vidsub(this.id)" type="submit" value="<%=arr[i]%>">
<%}%>
</a>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<div class='modal-content'>
<!-- Modal content -->
<span class='close'>×</span>
<div id="mcont"></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function vidsub(clk) {
var btn = document.getElementById(clk);
var aval=btn.value;
var temp=JSON.stringify(aval);
document.getElementById("mcont").innerHTML =" <video autoplay id='vid' loop controls width='100%' height='100%'> <source src="+temp+" type='video/mp4'> <object data='js/video-js.swf' width='720' height='480'></object> </video>";
modal.style.display = "block";
};
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
x.pause();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>/*modal.css */
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: #666666; /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #666666;
margin: auto;
padding: 20px;
border:none;
width: 50%;
}
/* The Close Button */
.close {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #ff3399;
text-decoration: none;
cursor: pointer;
}(1)使用本地文件作为元素源...
"下面的代码不起作用：
src="C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4"">
尝试使用file，因为本地磁盘上没有可用的http：
src="file:///C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4"
(2)关闭模态时删除视频...
您的视频由以下方法创建：.innerHTML动态创建video>标签的方法。
a) 您可以尝试将其设为空白(或为空)：
document.getElementById("mcont").innerHTML ="";
b)您可以尝试暂停视频元素：
var myVid = document.getElementById("vid");
myVid.pause();
示例代码：
(一个是空白innerHTML，另一个是暂停<video>，看看哪种方法最适合您)：
//# When the user clicks on <span> (x), close the modal
span.onclick = function()
{
document.getElementById("mcont").innerHTML ="";
modal.style.display = "none";
x.pause();
}
//# When the user clicks anywhere outside of the modal, close it
window.onclick = function(event)
{
if (event.target == modal)
{
document.getElementById("vid").pause();
modal.style.display = "none";
}
}