레이블이 Picture-in-Picture인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Picture-in-Picture인 게시물을 표시합니다. 모든 게시물 표시

2019년 3월 5일 화요일

크롬 PIP 예제

- 구글 PIP 예제 :
https://developers.google.com/web/updates/2017/09/picture-in-picture


1. HTML 코드
- 샘플영상 출처 :
http://www.ithinknext.com/mydata/board/files/F201308021823010.mp4

- 코드
<html>
<head>
</head>

<body>
<video id="video" src="http://www.ithinknext.com/mydata/board/files/F201308021823010.mp4"></video>

<button id="pipButton">PIP</button>

<script>
  // Hide button if Picture-in-Picture is not supported.
  pipButton.hidden = !document.pictureInPictureEnabled;

  pipButton.addEventListener('click', function() {
    // If there is no element in Picture-in-Picture yet, let's request Picture
    // In Picture for the video, otherwise leave it.
    if (!document.pictureInPictureElement) {
      video.requestPictureInPicture()
      .catch(error => {
        // Video failed to enter Picture-in-Picture mode.
      });
    } else {
      document.exitPictureInPicture()
      .catch(error => {
        // Video failed to leave Picture-in-Picture mode.
      });
    }
  });
</script>

</body>
</html>

> 결과