HTML5 Fullscreen API 응용 및 Video 네이티브 컨트롤 제어하기 (hide control css)

HYEONG HWAN, MUN/ 8월 18, 2016/ 미분류/ 0 comments

https://blog.lael.be/post/4950

명확하게 정리된 해설이 없길래, 내가 직접 이곳에 요약 정리해 본다.

 

나에게 “기존 사용하고 있는 HTML5 플레이어를 유튜브 플레이어 같이 작업해달라” 라는 요청사항이 왔다.

이에 맞추어 기술조사를 하였고 처리하였다.

 

1. UserAgent StyleSheet 의 이해

웹브라우저를 컴퓨터 용어로 UserAgent 라고 부른다.

ua1

웹브라우저는 HTML 태그를 해석하고 화면에 그리기(나타내기) 위해서 자체적인 StyleSheet 를 내장하고 있다. 이것을 웹브라우저-스타일시트 라고 부르며 UserAgent StyleSheet 라고 쓴다.

이 웹브라우저-스타일시트는 브라우저 화면 표시 규칙으로써 거의 비슷하나, 브라우저별로 조금씩 다르다. (95%쯤 동일)

 

2. FullScreen 사용

var fullscreenTarget = document.getElementById('my_full_screen_element');

먼저 FullScreen 을 사용할 객체를 선택해야합니다.

이 객체가 video 라면 특별히 브라우저의 자체의 비디오 플레이어가 실행된다.

 

video 객체의 fullscreen 의 경우 다음의 css 핵을 사용하여 비디오UI 디자인을 변경할 수 있습니다.

 

::-webkit-media-controls {
	display:none !important;
}
video::-webkit-media-controls {
	display:none !important;
}
video::-webkit-media-controls-enclosure {
	display:none !important;
}
video::-webkit-media-controls-fullscreen-button {
	display:none !important;
}

*::-webkit-media-controls-panel {
	display: none!important;
	-webkit-appearance: none;
}

*::--webkit-media-controls-play-button {
	display: none!important;
	-webkit-appearance: none;
}


*::-webkit-media-controls-start-playback-button {
	display: none!important;
	-webkit-appearance: none;
}

.my_custom_control_bar {
	z-index: 2147483647;
	position: relative;
}

 

브라우저마다 네이티브 컨트롤의 클래스명이 다르기 때문에 작업 후 확인해 주어야 합니다.


3. Fullscreen 웹표준 방법

Youtube 처럼 커스텀 컨트롤바-UI Fullscreen 을 구현하시려면 video 이외의 객체를 선택하여야 합니다.

var fullscreenTarget = document.getElementById('my_player_area_div'); // do not select video element.

if (fullscreenTarget.requestFullscreen) {
    fullscreenTarget.requestFullscreen();
} else if (fullscreenTarget.webkitRequestFullScreen) {
    fullscreenTarget.webkitRequestFullScreen();
} else if (fullscreenTarget.mozRequestFullScreen) {
    fullscreenTarget.mozRequestFullScreen();
} else if (fullscreenTarget.msRequestFullscreen) {
    fullscreenTarget.msRequestFullscreen();
}

if(document.exitFullscreen) {
    document.exitFullscreen();
} else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
} else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if(document.msExitFullscreen) {
    document.msExitFullscreen();
}
if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
    // do something.
}
else {
    alert('Your browser does not support HTML5 Fullscreen API.');
}
function getFullscreenStatus () {
    return document.fullscreenElement
        || document.webkitFullscreenElement
        || document.mozFullScreenElement
        || document.msFullscreenElement;
}

 

위의 네가지 함수를 적절히 사용하여 원하시는 FullScreen 화면 또는 FullScreen Player 를 만드시기 바랍니다.

 

4. 참고 사항

Fullscreen 표준규격에 따르면 RequestFullscreen (전체화면 전환)의 경우 User Activity 가 선행되도록 규정하고 있습니다. 따라서 전체화면 전환을 위해 마우스 클릭같은 사용자의 선행동작이 필요합니다.

2016년 09월 현재 IE와 Edge 는 규격에 맞추어 동작하고 있으며, 크롬 및 파이어폭스 및 사파리 는 사용자의 선행동작이 없어도 풀스크린으로 전환되도록 구현되어 있습니다.

참조 : https://fullscreen.spec.whatwg.org/#dom-element-requestfullscreen

Leave a Comment

작성하신 댓글은 관리자의 수동 승인 후 게시됩니다.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*