felvieira
12/11/2019 - 1:13 AM

Picture-in-Picture API Tocar video em uma pequena janela que fica em cima de tudo

Picture-in-Picture API (PiP) in #JavaScript. 😃

ℹ This is a new experimental Web Platform API that allows Web pages to play a video in a little window that stays on top of other windows.

👉 Here is a codepen link for better understanding http://bit.ly/2sY6vLZ

💬 Have you used this before? Please comment below and let us know what was your use case. 😃

And as always, Share if you care 😄

#simple_javascript

index.html
content_copyfile_download
<div class="container">
  <h3>Please play the video and then scroll...<br>(Google Chrome is recommended)</h3>
  <video id="video" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
  
</div>
index.css
content_copyfile_download
body {
  padding: 20px
}
h3 {
  text-align: center;
}

video {
  margin: 50vh auto 100vh;
  max-width: 100%;
  border: 1px solid;
}
index.js
content_copyfile_download
const video = document.getElementById('video');

const io = new IntersectionObserver(entries => {
  if(entries[0].intersectionRatio !== 0) {
    //visible
    if (document.pictureInPictureElement) {
      document
        .exitPictureInPicture()
        .catch(error => {
        console.log(error);
      })
    }
  } else {
      // not visible    
      if ('pictureInPictureEnabled' in document) {
        video
          .requestPictureInPicture()
          .catch(error => {
            console.log(error);
          })
      }

    }
  })

io.observe(video);



// if ('pictureInPictureEnabled' in document) {
//   pipButton.classList.remove('hidden')
//   pipButton.disabled = false;
  
//   pipButton.addEventListener('click', () => {
//     if (document.pictureInPictureElement) {
//       document
//         .exitPictureInPicture()
//         .catch(error => {
//           // Error handling
//         })
//     } else {
//       video
//       .requestPictureInPicture()
//       .catch(error => {
//         // Error handling
//       });
//     }
//   });
// }

// video.addEventListener('enterpictureinpicture', () => {
//     pipButton.textContent = 'Exit Picture-in-Picture mode';
// });

// video.addEventListener('leavepictureinpicture', () => {
//     pipButton.textContent = 'Enter Picture-in-Picture mode';
// });