我有一个HTML5网页,有一个全屏视频背景。
当我试图通过Windows中的文件夹点击.html文件来运行网页文件时,没有问题。
但是,当我尝试在Netbeans中使用Web服务器将其作为HTML或PHP项目运行时,视频播放一次,然后停止播放,同时它具有循环的特性。当我通过窗口打开.html文件时,循环确实有效。
在一些视频上,它甚至没有加载整个视频,但视频控件是存在的。但屏幕一直是黑色的。
是我的代码导致了这个问题吗?或Netbeans应用程序。
这是我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/plugins.css" type="text/css" rel="stylesheet">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="fitScreen">
<div class="loading"></div>
<div class="mainContent">
<video preload="auto">
<source src="sample.mp4" type="video/mp4">
</video>
<div id="logo"></div>
</div>
</div>
</body>
</html>
和CSS:
@import "reset.css";
html, body {
height: 100%;
width: 100%;
font-family: Arial;
overflow-x: hidden;
}
.fitScreen {
position: relative;
z-index: 0;
height: 100%;
background-color: black;
}
.mainContent video {
display: none;
position: fixed;
z-index: 2;
height: auto;
width: auto;
min-height: 100%;
min-width: 100%;
}
还有一点预加载程序的javascript:
$(window).load(function() {
$('.loading').animate({'opacity': '50%'}, 1500, function() {
$('.loading').fadeOut('fast');
$(".fitScreen video").prop('muted', true); //mute
setTimeout(function() {
$('.fitScreen video').fadeIn(2000);
$('.fitScreen video').get(0).play();
}, 250);
$('#logo').delay(500).fadeIn(2000);
});
});
我目前正在使用Netbeans 8。
我假设您正在NetBeans的嵌入式服务器上运行该项目?如果是这样,请尝试在Chrome中运行它(像往常一样从NetBeans运行(,打开Chrome Developer Tools,使用F5重新加载页面,然后切换到Chrome Developer Tools中的"网络"选项卡,并检查带有视频记录的行的"类型"列。应该有类似video/mp4或video/[something]的东西。嵌入式服务器可能不支持这种mime类型。如果是这种情况,请查看此链接http://forums.netbeans.org/topic58110.html有一些变通方法可以启用它。