当我使用以下代码时，我无法播放视频
<video autoplay controls loop id="vid1" width="100%" height="100%"> <source src="file:///C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4" type="video/mp4">
但是当 src="video/example.mp4" 时有效
当我直接从文件夹运行 html 代码(不在任何 IDE 内)时，完整路径有效(将显示其工作原理) enter image description here
当我使用 Firefox 作为浏览器打开 play.html 时，视频就会播放。但是，当我在 netBeans IDE 中运行 play.html 时，视频却没有播放。玩吧。也就是说，在 netbeans 内部完整路径不起作用。
src="file:///C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4" .
仅来源src="video/example.mp4"将播放视频。
解决办法是什么？
完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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;
}
</style>
</head>
<body>
<h2>Flv Video</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Play</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<video autoplay controls loop id="vid1" width="100%" height="100%"> <source src="file:///C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4" type="video/mp4">
<object data="js/video-js.swf" width="720" height="480">
</object>
</video>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
var x=document.getElementById("vid1");
///alert(x);
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";
x.pause();
}
}
</script>
</body>
</html>最佳答案
原因是因为完整路径在 Netbeans 中不起作用，因为 html 想要知道视频在项目内的位置。您必须将视频与项目文件夹分开。
有时您可以将视频文件拖到 html 代码中，它会删除一个 src 行，其中包含视频的任何文件路径。这将使您拥有正确的文件路径并确保文件路径中没有拼写错误。看起来您的///后文件太多，您可能只需要以“C:”开头的路径尝试一下!
关于javascript - 为什么视频完整路径在 netBeans IDE 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57705568/