PIP기능의 경우, 안드로이드 사용자라면, 웬만하면 사용해보았을 것이다. 별건 아니고...
지금까지는 위처럼 영상에서만 가능하였지만, 현재 실험적기능으로 문서를 플로팅 처리하는 것이 생겼다.
하지만, 아쉽게도... PC기준으로, 크롬, 엣지, 오페라 정도만 지원을 하고 있다. 하지만, 이정도로만 해도, 의미는 있다. 어드민 페이지를 구현을 하다보면, 스크롤이 길게 생기는 경우가 있고, 값을 확인하여, 결과값을 입력해야 하는 경우같은 경우도 있기 때문에, 부분적으로 플로팅 UI를 지원하는 것은 앞으로 꽤나 큰의미를 가질 수 있다.
간단하게 코드로 작성해보자.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
</head>
<body>
<table id="contents">
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>테스트</td>
<td>20</td>
<td>남자</td>
</tr>
<tr>
<td>테스트2</td>
<td>30</td>
<td>여자</td>
</tr>
</table>
<button onclick="openPictureInPicture()">PIP document</button>
<table>
<tr>
<th>이름</th>
<th>수학</th>
<th>영어</th>
</tr>
<tr>
<td>테스트</td>
<td>70</td>
<td>90</td>
</tr>
<tr>
<td>테스트2</td>
<td>80</td>
<td>90</td>
</tr>
</table>
<script type="text/javascript">
const contents = document.getElementById("contents");
async function openPictureInPicture() {
const pipWindow = await window.documentPictureInPicture.requestWindow({
width: 400,
height: 400
});
pipWindow.document.body.append(contents);
}
</script>
</body>
</html>
간단하게 작성한 코드이다, window.documentPictureInPicture.requestWindow로 윈도우를 하나 생성하여, pipWindow.document.body.append(contents);를 사용하여, 원하는 컨텐츠를 노출 시키기만 하면 된다.
위 처럼, 문서 자체도 PIP모드가 가능해진다. 일단 이번에는 소개만 진행 해본다. 실험적 기능에서 정식 기능으로 편입 되면, 브라우저에서 멀티윈도우를 사용 하는 방식이 매우 바뀔것 같다...
댓글
댓글 쓰기