html5 풀스크린 (fullscreen) 구현 관련

WEB/html5

by AlrepondTech 2020. 9. 21. 02:11

=================================

출처: http://mohwaproject.tistory.com/134

HTML5 Full Screen API 간단 구현

웹 브라우저(Gecko, Webkit 등..)상에서 특정 엘리먼트 영역을 전체 화면(툴바 영역이 보이지 않는)으로 변경할 수 있는 FullScreen API가 있습니다.

API에 대한 설명은 그리 어렵지 않아 따로 설명 드리지 않도록 하겠습니다.

아래는 관련 소스를 모듈화 시킨 코드 입니다.

1. JSBin 소스 링크:

http://jsbin.com/ayicib/3

2.모듈 사용방법:

window.onload = function () {

        var contextStart = document.getElementById('specialstuffStart');

        var btnStart = document.getElementById('fsbuttonStart');
        var btnEnd = document.getElementById('fsbuttonEnd');

        bind(btnStart, 'click', function () {
            FullScreen.on(contextStart, function (e) {
                btnStart.style.display = 'none';
                btnEnd.style.display = 'block';
            }, function (e) {
                btnStart.style.display = 'block';
                btnEnd.style.display = 'none';
            });
        }, false);

        bind(document, 'keyup', function (e) {
            // space key
            if (e.keyCode === 32) FullScreen.off();
        }, false);
    }

    function bind(elem, type, handler, capture) {
        type = typeof type === 'string' ? type : '';
        handler = typeof handler === 'function' ? handler : function () { ; };
        capture = capture || false;

        if (elem.addEventListener) {
            elem.addEventListener(type, handler, capture);
        }
        else if (elem.attachEvent) {
            elem.attachEvent('on' + type, handler);
        }

        return this;
    }

FullScreen.on(contextStart, function (e) {
                btnStart.style.display = 'none';
                btnEnd.style.display = 'block';
            }, function (e) {
                btnStart.style.display = 'block';
                btnEnd.style.display = 'none';
            });

FullScreen.on(context, open, close);

context: 전체화면 영역

open: 전체화면 open 시 이벤트 핸들러

close: 전체화면 close 시 이벤트 핸들러

  bind(document, 'keyup', function (e) {
            // space key
            if (e.keyCode === 32) FullScreen.off();
        }, false);

FullScreen.off(): 전체화면 중지.

3. 실행화면 및 브라우저 지원 상황:

실행화면:

브라우저 지원 상황:

참고 사이트:

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

=================================

출처: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

HTML5 <video> is great, but when it was first released, one of the big complaints was that it couldn’t do true FullScreen like Flash. Thankfully, this is changing and native FullScreen support is coming to most browsers in the next few months (~~no word from the Internet Explorer team~~ Update on IE below #5))

The API is still heavily in flux especially since the W3C joined in this week. I spent some time working through the differences to implement FullScreen in MediaElement.js HTML5 video player, and it’s working great in Safari 5.1+, ~~Chrome Canary~~ Chrome 15+, or Firefox Nightly (go to about:config and set full-screen-api.enabled= true) and scheduled forFirefox 10. Below I’m going to try to explain how things evolved, where we are today, and then some code that you can play with.

Simple Demo Video Demo

A Brief History of the FullScreen API

The first native FullScreen implementation appeared in Safari 5.0 (and iOS) added a a webkitEnterFullScreen()function that only worked on <video> tags using Safari’s video controls (see Apple’s HTML5VideoElement).
For Safari 5.1, Apple changed the API to be more inline with Mozilla’s FullScreen API proposal (which actually predates Apple’s implementation). Now, webkitRequestFullScreen() can be called on any DOM element which makes that portion of an HTML page go fullscreen.
Firefox and Chrome announced that they will add FullScreen API support, and the feature has already arrived in~~Chrome Canary~~ Chrome 15+ and Firefox Nightly (scheduled for Firefox 10). The Mozilla team has posted some a demo.
On October 15, 2011, the W3C released a Fullscreen API proposal (written by a member of the Opera team) which has two main differences from Mozilla’s proposal:
1. Mozilla/Webkit uses a Capital ‘S’ (FullScreen) while W3C does not (Fullscreen)
2. Mozilla/Webkit uses cancelFullScreen
  while W3C uses exitFullscreen
Update (11/15/2011): Ted Johnson from IEBlog says ~~IE10 will not support the FullScreen API~~ (12/05/2011: I misunderstood the first email from Ted) that the IE10 team has not yet decided whether to implement the FullScreen API. He notes however that, “Windows 8 Metro style Internet Explorer is always full screen … and as before, F11 enters full screen mode in desktop versions of IE.”

Understanding the FullScreen API

Here are the most important parts of the FullScreen API with notes on how things differ among browsers. In general, I’m using the Mozilla/Webkit spelling in the examples below, but I’m also noting the W3C differences where needed.

1. Detecting FullScreen support

To detect fullscreen support, you’ll need to use the typeof command to find out if a given browser has support for the FullScreen API methods. There is also boolean property called fullScreenEnabled that tells you if the user has disabled the feature (strangely WebKit does not have the fullScreenEnabled property making it difficult to detect if it’s turned off).

?

// Mozilla's proposed API: in practice, you'll need vendor prefixes (see examples below)
if (typeof document.cancelFullScreen != 'undefined' && document.fullScreenEnabled === true) {
/* do fullscreen stuff */
}

2. Entering and Exiting FullScreen

To enter FullScreen mode, you call requestFullScreen (or requestFullscreen for W3C) on the element want to be viewed in FullScreen. To exit you call cancelFullScreen (or exitFullscreen for W3C) on the document object.

?

// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen();

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

Mozilla has also proposed an alternate requestFullScreenWithKeys() method which would enable the user to use the keyboard in FullScreen mode. With Flash, Adobe always disabled keyboard support in FullScreen to prevent malicious sites from attempting to steal passwords, but it looks like the browser makers are considering making this an option.

3. Fullscreen Event and Current Status

To detect when a FullScreen event happens, there is a fullscreeneventchange that fires on the element going FullScreen and a boolean property (fullScreen) on the document object that reports if it’s in FullScreen mode or not.

?

element.addEventListener('fullscreeneventchange', function(e) {
    if (document.fullScreen) {
       /* make it look good for fullscreen */
    } else {
       /* return to the normal state in page */
    }
}, true);

// note: unlike Webkit and the W3C proposal,
// Mozilla fires its mozfullscreenchange event on the *document* object
// instead of the element going fullscreen

Mozilla also mentions the possibility of adding a fullscreendenied event in the future. You should also know that Webkit added an ‘Is’ to their boolean property and that the W3C proposal strangely does not include this property:

?

// Mozilla proposal
document.fullScreen;
// Firefox (Nightly)
document.mozFullScreen;
// Webkit (Chrome, Safari)
document.webkitIsFullScreen; // note the 'Is'
// W3C proposal
// None? Why?

4. Styling FullScreen

Both Mozilla and the W3C have proposed new pseudo CSS classes for styling elements in FullScreen mode.

?

/* normal state */
.my-container {
    width: 640px;
    height: 360px;
}

/* Mozilla proposal (dash) */
.my-container:full-screen {
    width:100%;
    height:100%;
}

/* W3C proposal (no dash) */
.my-container:fullscreen {
    width:100%;
    height:100%;
}

/* currently working vendor prefixes */
.my-container:-webkit-full-screen, .my-container:-moz-full-screen {
    width:100%;
    height:100%;
}

5. Embedding FullScreen

When you embed content from another site (like a YouTube video) using Flash’s <object><embed> tags, you can specificy whether or not to allow FullScreen to work. This feature has also been added to the <iframe> tag using the allowFullScreen attribute.

?

<iframe src="http://anothersite.com/video/123" width="640" height="360" allowFullScreen></iframe>

Putting it All Together

To make this work in its current state, you need a wrapper that can help detect the right features. Here’s what I’ve put together to work in Safari 5.1, ~~Chrome Canary~~ Chrome 15+, and Firefox Nightly. I’ll update it if the W3C notation goes through:

?

This creates an object called fullScreenApi with a boolean property supportsFullScreen and some methods that allow you to do something more universal. Here’s an example usage:

?

if (fullScreenApi.supportsFullScreen) {
    myButton.addEventListener('click', function() {
        fullScreenApi.requestFullScreen(someElement);
    }, true);
}

You can see it in action below:

Simple Demo Video Demo

Issues and Updates

Since this post, there are some additional things worth mentioning

Security concerns – Browser vendors are well aware of the potential security issues with fullscreen. For example, a malicious site could show a full screen Windows or Mac login window and steal a password. That’s why they are disabling keyboard support by default and only enabling by explicitly asking.
Internet Explorer support – ~~I have an email from a IE team member saying they are discussing it, but have not made any decisions.~~ As of now, ~~IE10 will not implement the FullScreen API~~, the IE team has not yet decided if they will implement the FullScreen API.
FullscreenEnabled vs. IsFullScreen – The W3C includes the very helpful fullscreenEnabled flag to let your code know if you can use the API, but strangely the W3C does not include an isFullscreen flag. WebKit on the other hand has webkitIsFullScreen, but does not have a webkitFullScreenEnabled equivalent property. Mozilla helpfully includes both.
FullScreenChanged event – The W3C and Webkit fire the fullscreenchanged event on the element going fullscreen, but Mozilla fires the event on the document object.

=================================

출처: http://html5dev.kr/55

관련 사이트: http://sindresorhus.com/screenfull.js/

컨텐츠를 전체화면으로 표시할 때 편리하게 이용할 수 있는 JS라이브러리 screenfull.js로 FullScreen API의 크로스 브라우저로 실행하는 래퍼 라이브러리입니다.

사용시, 페이지내 이미지나 영상이 있다면, 클릭하면 전체화면으로 보여주는 간단한 방법이 생기게 되었다는 것입니다.

예: screenfull.request($('#container')[0]);

screenfull.request(element)구조로 선언하여 전화면을 표시할 수 있습니다.

그외 전체화면을 보여준후, 이벤트 핸들러도 설정할 수 있습니다.

=================================

http://html5-demos.appspot.com/static/fullscreen.html

=================================

저작자표시

'WEB > html5' 카테고리의 다른 글

html5 웹소켓, WebGL, canvas, 게임 관련 책 모음 (0)	2020.09.21
html5 UI 엔진과 프레임워크 사이트 관련 (0)	2020.09.21
Javascript 자바스크립트, html5 코드 압축, JS 압축 관련 (0)	2020.09.20
엔진 html5 빌드 관련 WebGL(Html5) 사용시 gz, gzip 에러관련 (unreal engine, unity 등등) (0)	2020.09.20
자바스크립트 js 압축 "gz" 을 사용하기위한 iis 설정 관련 (0)	2020.09.15

알레폰드의 테크 이모저모

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

A Brief History of the FullScreen API

Understanding the FullScreen API

1. Detecting FullScreen support

2. Entering and Exiting FullScreen

3. Fullscreen Event and Current Status

4. Styling FullScreen

5. Embedding FullScreen

Putting it All Together

Issues and Updates

'WEB > html5' 카테고리의 다른 글

관련글 더보기

댓글 영역

추가 정보

인기글

최신글

티스토리툴바