2014-04-30 2 views
0

저는 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.

답변

0

NetBeans의 임베디드 서버에서 프로젝트를 실행하고 있다고 가정합니까? 그렇다면 Chrome에서 Chrome 개발자 도구를 열고 Chrome 개발자 도구를 열고 F5 키를 사용하여 페이지를 다시로드 한 다음 Chrome 개발자 도구에서 네트워크 탭으로 전환하고 비디오 레코드가있는 행의 유형 열을 확인합니다. 비디오/mp4 또는 비디오/[무언가]와 같은 것이 있어야합니다. 임베디드 서버가이 MIME 유형을 지원하지 않을 수 있습니다. 그렇다면이 링크를 확인하십시오 http://forums.netbeans.org/topic58110.html 사용할 수있는 몇 가지 해결 방법이 있습니다.

+0

Github의 George Paterson에서 jquery-background-video를 다운로드하면 작동합니다. 그런데 비디오를 바꾸려고 할 때, 비디오를 다운로드 할 때, 내 크롬 개발자 도구에서 비디오를 로딩하지 않습니다. 그러나 두 비디오 모두 mp4 형식입니다. 지금 뭐야? – Bas

+0

아니면 netbeans 포럼에 게시해야합니까? – Bas

+0

한 비디오가 잘 작동하고 다른 비디오가 잘 작동하지 않는다면 NetBeans와 관련이없는 것 같습니다. 비디오가 Chrome Dev Tools에 없다는 사실은 이상한 일이며 어떻게 될지 잘 모르겠습니다. 모든 애니메이션 및 jQuery 항목을 제거하고 간단한 HTML 코드로 작성하여 도움이되는지 확인하십시오. – ladar

관련 문제