저는 HTML5 웹 페이지가 있으며, 전체 화면 비디오 배경을 가지고 있습니다.Netbeans은 html5 비디오를로드하지 않습니다.
Windows에서 .html 파일을 클릭하면 웹 페이지 파일을 실행하려고 할 때 문제가 없습니다.
그러나 HTML이나 PHP 프로젝트로 웹 서버와 함께 Netbeans에서 실행하려고하면 동영상에 한 번 재생 된 다음 재생이 중지되고 루프의 속성이 있습니다. 그리고 루핑은 윈도우를 통해 .html 파일을 열 때 작동합니다.
일부 비디오에서는 비디오 전체가로드되지 않지만 비디오 컨트롤은 있습니다. 그러나 화면은 단지 검은 색으로 남아 있습니다.
내 코드가이 문제의 원인입니까? 또는 Netbeans 응용 프로그램.
<!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 :
$(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);
});
});
내가 현재 사용하고 : 사전 로더 틱 꼬추에 대한
@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%;
}
그리고 자바 스크립트의 ABIT
여기 내 HTML 코드입니다 넷빈 8.
Github의 George Paterson에서 jquery-background-video를 다운로드하면 작동합니다. 그런데 비디오를 바꾸려고 할 때, 비디오를 다운로드 할 때, 내 크롬 개발자 도구에서 비디오를 로딩하지 않습니다. 그러나 두 비디오 모두 mp4 형식입니다. 지금 뭐야? – Bas
아니면 netbeans 포럼에 게시해야합니까? – Bas
한 비디오가 잘 작동하고 다른 비디오가 잘 작동하지 않는다면 NetBeans와 관련이없는 것 같습니다. 비디오가 Chrome Dev Tools에 없다는 사실은 이상한 일이며 어떻게 될지 잘 모르겠습니다. 모든 애니메이션 및 jQuery 항목을 제거하고 간단한 HTML 코드로 작성하여 도움이되는지 확인하십시오. – ladar