您好，我无法从系统位置播放 jsp 中的视频文件。但是，如果我将视频文件(example.mp4)放在 web-content 下，然后在 jsp 中使用带有文件名的视频标签，如下所示，它将播放。 下面的代码不起作用
src="C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4"
当我使用以下格式时，我可以播放视频
src="video/example.mp4"; //video folder is under WEB-INF
另一个问题是当用户单击(x)或单击模态框之外的任何位置时，模态框将关闭，但视频会在模态框后面隐形播放。 如何在后台暂停或关闭视频？
完整代码如下
video.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)使用本地文件作为元素源...
"The below code didn't work:
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";
}
}
关于javascript - 如何使用 jsp 和 javascript 从完整路径(系统位置)播放视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57654624/