:picture-in-picture 伪类与模态层的样式控制实例页面

展示

代码

• HTML：

  <video id="video" src="fish-16166-s.mp4" controls playsinline loop></video>
      <p><button id="button" type="primary" is="ui-button">点击切换画中画状态</button></p>

• CSS：

  :picture-in-picture {
    outline: 5px solid yellow;
    box-shadow: 0 0 0 6px red;
  }

• JS：

  button.addEventListener('click', function(event) {
    try {
      if (video !== document.pictureInPictureElement) {
        // 尝试进入画中画模式
        video.requestPictureInPicture();      
      } else {
        // 退出画中画
        document.exitPictureInPicture();
      }
    } catch(error) {
      console.error('> 出错了！' + error);
    }
  });