jPlayer + 맞춤 컨트롤 + 상대 부모 = 전체 화면 없음?

Question

페이지에 jPlayer 비디오 구성 요소가 있습니다. 그들은 크게 스타일을 지정할 필요가 있으므로 사용자 지정 컨트롤을 작성했습니다. 전체 화면 버튼을 사용하여 헤더를 제외한 전체 뷰포트를 덮도록 비디오를 확장합니다. 문제는 동영상이 상대적으로 위치가 지정된 div 안에 있으므로 상단, 왼쪽 및 절대 위치를 설정하면이 div 만 채우는 것입니다.

구조 : 저는 현재 "최대 동기화"하나에서 전체 화면을 클릭하면 다른 트리거하지만 우아하지 그리고 일을 몇 가지 해킹을 필요로 두 개의 비디오 플레이어를 사용하고

<div id="header"></div><!--This should be visible, even in fullscreen--> 
<div id="wrapper"><!--I want the video to fill this wrapper when fullscreen is toggled--> 
    <div id="internalContainer"> <!--This is relatively positioned and smaller than the wrapper--> 
     <video/><!--This is the video I want to expand--> 
    </div> 
</div> 

.

이렇게하는 좋은 방법이 있습니까? 플래시 폴백을 사용할 때 jPlayer가 중단되므로 비디오 노드를 분리하고 다시 연결할 수 없습니다.

Answer 1

아마 토마스에게 늦었 겠지만, 내가 비슷한 시나리오에서 일하는 이유는 여기에 있습니다. 그것은 두 걸음 씩 걸렸습니다.

1 단계 : 설정 위치 : .jp-video-full 클래스로 고정.

.jp-video-full { position: fixed; top: 0px; left: 0px; } 

2 단계 : 전체 화면에서 복원 할 때 다시 브라우저 창 폭에 폭을 설정하고 jplayer 생성자에 resize 이벤트를 추가합니다.

$("#jquery_jplayer_1").jPlayer({ 
    resize: function(){ 
     if ($("#jp_container_1").is('.jp-video-full')) { 
      $('div.jp-video-full').width($(window).width()); 
     } else { 
      $('div.jp-video-360p').width(670); 
     } 
    } 
});