HTML5 비디오를 전체 화면으로 만드는 방법이 있습니까?

HTML5 <video>태그를 사용하여 비디오를 전체 화면으로 재생하는 방법이 있습니까?

이것이 가능하지 않다면,이 결정의 이유가 있는지 아는 사람이 있습니까?

HTML 5는 비디오를 전체 화면으로 만드는 방법을 제공하지 않지만 병렬 전체 화면 사양requestFullScreen 은 임의의 요소 ( <video>요소 포함 )를 전체 화면으로 만들 수 있는 방법을 제공합니다 .

그것은이 브라우저의 수의 실험적인 지원 .

원래 답변 :

로부터 HTML5 스펙 (6 월 '09 글을 쓰는 시점에서) :

사용자 에이전트는 동영상을 전체 화면으로 표시하기 위해 공개 API를 제공해서는 안됩니다. 신중하게 조작 된 비디오 파일과 결합 된 스크립트는 사용자에게 시스템 모달 대화 상자가 표시되었다고 생각하게하고 암호를 입력하도록 프롬프트 할 수 있습니다. 링크를 클릭하거나 페이지를 탐색 할 때 페이지가 전체 화면 비디오를 시작하는 "단순한"성가신 위험이 있습니다. 대신, 사용자 에이전트 특정 인터페이스 기능이 제공되어 사용자가 전체 화면 재생 모드를 쉽게 얻을 수 있도록한다.

브라우저는 사용자 인터페이스를 제공 할 수 있지만 프로그래밍 가능한 인터페이스를 제공해서는 안됩니다.

위의 경고는 사양에서 제거되었습니다.

여기에있는 대부분의 답변은 구식입니다.

Fullscreen API를 사용하여 모든 요소를 ​​전체 화면으로 가져올 수 있습니다 div.requestFullScreen().하지만 모든 브라우저를 호출 할 수는 없지만 브라우저 특정 접두사 메서드를 사용해야 하기 때문에 여전히 엉망 입니다.

Fullscreen API를보다 쉽게 ​​사용할 수 있는 간단한 래퍼 screenfull.js 를 만들었습니다.

현재 브라우저 지원은 다음과 같습니다.

• 크롬 15+
• Firefox 10 이상
• 사파리 5.1 이상

많은 모바일 브라우저는 아직 전체 화면 옵션 을 지원하지 않는 것 같습니다 .

Safari는를 통해 지원합니다 webkitEnterFullscreen.

Chrome 은 WebKit이므로 지원해야하지만 오류가 발생합니다.

Firefox의 Chris Blizzard는 모든 요소를 ​​전체 화면으로 이동할 수있는 자체 버전의 전체 화면을 제공한다고 밝혔습니다. 예 : 캔버스

Opera의 Philip Jagenstedt는 향후 릴리스에서이를 지원할 것이라고 말했습니다.

예, HTML5 비디오 사양은 전체 화면을 지원하지 않는다고 말하지만 사용자가 원하면 모든 브라우저가 지원하므로 사양이 변경됩니다.

webkitEnterFullScreen();

예를 들어 페이지에서 첫 번째 비디오 태그를 전체 화면으로 표시하려면 비디오 태그 요소에서 호출해야합니다.

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

주의 사항 : 이것은 오래된 답변이며 더 이상 관련이 없습니다.

많은 최신 웹 브라우저는 특정 HTML 요소에 전체 화면 포커스를 제공 할 수있는 FullScreen API를 구현했습니다. 몰입 형 환경에서 비디오와 같은 대화 형 미디어를 표시하는 데 정말 좋습니다.

전체 화면 버튼을 작동 시키려면 requestFullScreen()버튼을 클릭 할 때 함수 를 호출 할 다른 이벤트 리스너를 설정해야합니다 . 지원되는 모든 브라우저에서이 기능을 사용하려면 사용 가능한지 확인 requestFullScreen()하고 공급 업체 접두사 버전 ( mozRequestFullScreen및 webkitRequestFullscreen)으로 대체 할 수 있는지 확인해야합니다 .

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

참조 : - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode 참조 : - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -비디오

비공개 소스 플러그인 (플래시 플러그인의 역사와 함께 제공되는 모든 보안 침해)없이 브라우저에서 비디오를 볼 수있는 열린 방법을 원한다면 ... 이 태그는 전체 화면을 활성화하는 방법을 찾아야합니다. 플래시처럼 처리 할 수 ​​있습니다. 전체 화면을 수행하려면 마우스로 왼쪽 클릭하여 활성화해야합니다. 예를 들어 플래시로드시 전체 화면

나는 내가 충분히 명확했으면 좋겠다 : 결국, 나는 영어 시인이 아닌 프랑스 IT 학생 일 뿐이다. :)

안녕!

CSS에서

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

전체 화면을 만드는 프로그래밍 가능한 방법은 Firefox 및 Chrome (최신 버전)에서 작동합니다. 좋은 소식은 여기에 사양이 초안되었다는 것입니다.

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

지금은 공급 업체 접두사를 처리해야하지만 MDN 사이트에서 모든 구현 세부 정보를 추적하고 있습니다.

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

너비와 높이를 100 %로 변경할 수 있지만 브라우저 크롬이나 OS 셸에는 적용되지 않습니다.

디자인 결정은 HTML이 브라우저 창 안에 있기 때문입니다. 플래시 플러그인은 창 안에 없으므로 전체 화면으로 이동할 수 있습니다.

그렇지 않으면 쉘을 덮은 img 태그를 만들거나 전체 화면이 문자가되도록 h1 태그를 만들 수 있습니다.

아니요, html 5로 전체 화면 비디오를 가질 수 없습니다. 이유를 알고 싶다면, 전체 화면에 대한 논쟁이 벌어지기 때문에 운이 좋습니다. WHATWG 메일 링리스트를 참조 하여 "video"라는 단어를 찾으십시오. 개인적으로 HTML 5에서 전체 화면 API를 제공하기를 바랍니다.

Firefox 3.6에는 HTML5 비디오에 대한 전체 화면 옵션이 있으며 비디오를 마우스 오른쪽 단추로 클릭하고 '전체 화면'을 선택하십시오.

최신 웹킷 nightlies는 전체 화면 HTML5 비디오도 지원합니다. Sublime 플레이어를 사용해보십시오 하며, 최신 야간을 사용하는 를 하고 전체 화면 옵션을 선택하는 동안 Cmd / Ctrl을 누르고 있습니다.

Chrome / Opera도 이와 같은 것을 지원할 것입니다. 바라건대 IE9는 전체 화면 HTML5 비디오도 지원할 것입니다.

이것은 webkitEnterFullscreen을 통해 WebKit에서 지원됩니다 .

다른 해결책은 상황에 맞는 메뉴에서 브라우저를 통해이 옵션을 제공하는 것입니다. 언제 유용한 지 알 수 있지만 Javascript가 필요하지 않습니다.

그 동안 대체 솔루션은 단순히 창을 최대화 한 다음 (자바 스크립트가 화면 크기를 제공 할 수 있음) 비디오를 최대화하는 것입니다. 한 번 사용 해보고 결과가 사용자에게 적합한 지 확인하십시오.

HTML 5 비디오는 Safari의 최신 야간 빌드에서 전체 화면으로 표시되지만 기술적으로 어떻게 수행되는지 확실하지 않습니다.

완벽한 솔루션 :

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

사이트를 PWA (Progressive Web App)로 정의 할 수있는 옵션이있는 경우 manifest.jsondisplay: "fullscreen" 아래 에서 사용할 수있는 옵션도 있습니다 . 그러나 이것은 사용자가 홈 화면에 웹 응용 프로그램을 추가 / 설치하고 거기에서 열면 작동합니다.

예. HTML5 비디오에서 발생하는 일은 <video>태그를 넣으면 브라우저가 자체 UI를 제공하므로 전체 화면을 볼 수 있다는 것입니다. Flash를 사용하는 일부 개발자가 만들 수있는 "예술"을 볼 필요가없는 사용자에게는 실제로 인생이 훨씬 나아집니다.

간단합니다. 모든 문제는 다음과 같이 해결할 수 있습니다.

1) 탈출은 항상 전체 화면 모드에서 빠져 나옵니다 (F11을 통해 전체 화면을 수동으로 입력하는 경우 적용되지 않음)

2) 전체 화면 비디오 모드가 입력되었다는 작은 배너가 일시적으로 표시됩니다 (브라우저에서)

3) html5의 팝업 및 로컬 데이터베이스 및 위치 api 등에서 수행 된 것처럼 기본적으로 전체 화면 작업 차단

이 디자인에는 아무런 문제가 없습니다. 아무도 내가 놓친 것 같아?

Chrome 11.0.686.0 개발자 채널부터 Chrome에는 이제 전체 화면 동영상이 있습니다.

F11 (많은 브라우저의 경우 전체 화면)을 누르라고 사용자에게 말하고 비디오를 페이지 전체에 넣으면 가능합니다.

이 답변 중 어느 것도 효과가 없으면 (그들이 나를 위해하지 않은 것처럼) 두 개의 비디오를 설정할 수 있습니다. 하나는 일반 크기이고 다른 하나는 전체 화면 크기입니다. 전체 화면으로 전환하려는 경우

1. 자바 스크립트를 사용하여 전체 화면 동영상의 'src'속성을 작은 동영상 'src'속성으로 설정
2. 전체 화면 비디오의 video.currentTime을 작은 비디오와 동일하게 설정하십시오.
3. css 'display : none'을 사용하여 작은 비디오를 숨기고 'position : absolute'및 'z-index : 1000'또는 실제로 높은 것을 통해 큰 비디오를 표시하십시오.