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

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();

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

---

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

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

다음에 봐!

---

많은 최신 웹 브라우저는 특정 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 -비디오

---

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

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

You will still have to deal with vendor prefixes for now but all the implementation details are being tracked in the MDN site:

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

---

From 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;
}

---

You can change the width and height to be 100%, but it won't cover the browser chrome or the OS shell.

Design decision is because HTML lives inside the browser window. Flash plugins aren't inside the window, so they can go full screen.

This makes sense, otherwise you could make img tags that covered the shell, or make h1 tags so the whole screen was a letter.

---

No, it is not possible to have fullscreen video in html 5. If you want to know reasons, you're lucky because the argument battle for fullscreen is fought right now. See WHATWG mailing list and look for the word "video". I personally hope that they provide fullscreen API in HTML 5.

---

Firefox 3.6 has a full screen option for HTML5 video's, right-click on the video and select 'full screen'.

The latest Webkit nightlies also support full screen HTML5 video, try the Sublime player with the latest nightly and hold Cmd / Ctrl while selecting the full screen option.

I guess Chrome / Opera will also support something like this. Hopefully IE9 will also support full screen HTML5 video.

---

This is supported in WebKit via webkitEnterFullscreen.

---

An alternative solution would be to have to browser simply provide this option on the contextual menu. No need to have Javascript to do this, though I could see when it would be useful.

In the mean time an alternative solution would simply be to maximise the window (Javascript can provide screen dimensions) and then maximise the video within it. Give it a go and then simply see if the results are acceptable to your users.

---

HTML 5 video does go fullscreen in the latest nightly build of Safari, though I'm not sure how it is technically accomplished.

---

The complete solution:

    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();
                    }
            }
    }

---

Yes. Well what happens with HTML5 video is that you just put the <video> tag and the browser will give it's own UI, and thus the ability for full screen viewing. It really makes life much better on us users to not have to see the "art" some developer playing with Flash could make :) It also adds consistency to the platform, which is nice.

---

it's simple, all the problems can be solved like this,

1) have escape always take you out of fullscreen mode (this doesn't apply to manually entering fullscreen through f11)

2) temporarily display a small banner saying fullscreen video mode is entered (by the browser)

3) block fullscreen action by default, just like has been done for pop-ups and local database in html5 and location api and etc, etc.

i don't see any problems with this design. anyone think i missed anything?

---

As of Chrome 11.0.686.0 dev channel Chrome now has fullscreen video.

---

You can do this if you tell to user to press F11(full screen for many browsers), and you put video on entire body of page.

---

If none of these answers dont work (as they didnt for me) you can set up two videos. One for regular size and another for fullscreen size. When you want to switch to fullscreen

1. Use javascript to set the fullscreen video's 'src' attribute to the smaller videos 'src' attribute
2. Set the video.currentTime on the fullscreen video to be the same as the small video.
3. Use css 'display:none' to hide the small video and display the big one with the via 'position:absolute' and 'z-index:1000' or something really high.

참고URL : https://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen