HTML5 동영상 전체 화면 버튼

YouTube 소스를 지원하는이 html5 비디오 플레이어를 발견했습니다. 하지만 전체 화면 버튼이 없으므로 전체 화면 기능을 구현하기 시작했습니다. 내 문제는 이제 크롬이나 사파리에서 비디오가 100 % 너비를 차지하지 않는다는 것입니다 (실제로는 전체 크기가 아니라 모든면에서 검은 색 틈이 있습니다).HTML5 동영상 전체 화면 버튼

$('.video-fullscreen-btn', player).bind('click', function(e){ 
     if (player.requestFullscreen) { 
      player.requestFullscreen(); 
     } else if (player.msRequestFullscreen) { 
      player.msRequestFullscreen(); 
     } else if (player.mozRequestFullScreen) { 
      player.mozRequestFullScreen(); 
     } else if (player.webkitRequestFullscreen) { 
      player.webkitRequestFullscreen(); 
     } 
    });

가 나는 또한

:-webkit-full-screen video {width: 100%; height: 100%;}

가 여전히 작동하지 않는 CSS를 웹킷과 그것을 시도 :

나는이 스크립트를 사용했다. 누군가 크롬/사파리에서 작동하지 않는 이유를 알고 있습니까?

전체 예

는 여기에서 찾을 수 있습니다 : http://jsfiddle.net/Z5PTv/

출처

2014-02-24 marc4ndrew

나는 그냥 때문에 실제 비디오 컨텐츠의 화면 비율로 생각합니다. 원래 YouTube 동영상을 보면 동영상의 검은 색 막대가 각각 나타납니다.

그래서 내가 가정하는 비디오와 같은 종횡비를 가진 이미지가 공간을 차지해야하기 때문에 프리로드 이미지가 픽셀 화 된 것입니다.

비디오가 화면의 전체 너비 인 경우 비디오의 상단과 하단이 잘립니다. 차라리 측면에 검은 색 막대가 있다고 가정합니다.

출처

2014-02-24 17:32:12 deez22

문제점이 가로 세로 비율 인 경우 제어 할 수 있습니다. object-fit : fill; 하지만 지금은 Opera에서만 지원됩니다.

동영상 요소가 화면의 100 %를 사용하고 있다면 이것이 자기 자신의 비디오 이미지가 전체 화면을 채우도록 늘릴 것이라는 것을 의미하지는 않습니다. 비디오 요소의 controls 속성을 사용하여이 작업을 수행 할 수 있으며 비디오 이미지보다 컨트롤의 폭이 넓음을 알 수 있습니다.

데모 : http://netkoder.dk/netkoder/eksempler/eksempel0017.html

출처

2014-02-24 19:14:26 scootergrisen

HTML5 동영상 전체 화면 버튼

답변

관련 문제