PiP (Picture-in-Picture API)는 웹 페이지가 다른 창 상단에있는 작은 창에서 비디오를 재생할 수있게 해주는 새로운 실험용 웹 플랫폼 API이다. 이 기능은 사용자가 다른 일을하면서 비디오를 계속보고 싶어하는 비디오 사이트, 예를 들어 텍스트 자습서 비디오를 보면서 텍스트 편집기 등에서 코딩하는 비디오 사이트에 유용하다. 브라우저 버전이나 종류에 따라 지원하지 않을 경우가 있다. 크롬 최신 버전은 지원을 한다.
---------- index.html ---------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript test 03</title>
<style>
body{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
video{
width: 320px;
height: auto;
}
button{
margin: 10px auto;
}
</style>
</head>
<body>
<h1 id="title">Javascript Example 03 : PIP 모드에서 영상 재생</h1>
<video id="video" src="videos/Mountains - 7418.mp4" autoplay loop></video>
<button id="pipButton">PIP</button>
<script>
pipButton.hidden = !document.pictureInPictureEnabled;
function runPip(){
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.
});
}
}
pipButton.addEventListener('click', function() {
runPip();
});
</script>
</body>
</html>
------------------
아래 사이트에서 확인해 보자.
http://visualssing.dothome.co.kr/javascript/js_example003.html
