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>
> 결과
