html 镀铬/野生动物园样品中的图片

Posted 2021-05-10

Not support MediaStream.

```
Promise {<rejected>: DOMException: Media Streams are not supported yet.}__proto__: Promise[[PromiseStatus]]: "rejected"[[PromiseValue]]: DOMException: Media Streams are not supported yet.code: 9message: "Media Streams are not supported yet."name: "NotSupportedError"__proto__: DOMExceptionABORT_ERR: 20DATA_CLONE_ERR: 25DOMSTRING_SIZE_ERR: 2HIERARCHY_REQUEST_ERR: 3INDEX_SIZE_ERR: 1INUSE_ATTRIBUTE_ERR: 10INVALID_ACCESS_ERR: 15INVALID_CHARACTER_ERR: 5INVALID_MODIFICATION_ERR: 13INVALID_NODE_TYPE_ERR: 24INVALID_STATE_ERR: 11NAMESPACE_ERR: 14NETWORK_ERR: 19NOT_FOUND_ERR: 8NOT_SUPPORTED_ERR: 9NO_DATA_ALLOWED_ERR: 6NO_MODIFICATION_ALLOWED_ERR: 7QUOTA_EXCEEDED_ERR: 22SECURITY_ERR: 18SYNTAX_ERR: 12TIMEOUT_ERR: 23TYPE_MISMATCH_ERR: 17URL_MISMATCH_ERR: 21VALIDATION_ERR: 16WRONG_DOCUMENT_ERR: 4code: (...)message: (...)name: (...)constructor: ƒ DOMException()Symbol(Symbol.toStringTag): "DOMException"get code: ƒ ()get message: ƒ ()get name: ƒ ()__proto__: Object
VM370:1 Uncaught (in promise) DOMException: Media Streams are not supported yet.
```

<h1>Picture in Picture Web</h1>
supports Chrome 68+, Safari
<div>
<video id="video" style="width: 700px; height: 400px; left: 0px; top: 0px;" src="./sample.mp4" controls></video>
</div>
<div>
<button id="pipButton">Enter Picture in Picture</button>
<p id="windowSize"></p>
</div>

<script>
  // Safari
  if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
    // Toggle PiP when the user clicks the button.
    pipButton.addEventListener("click", function(event) {
      video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
    });
  }
  
  // Chrome
  else {
    pipButton.hidden = !document.pictureInPictureEnabled;
    pipButton.addEventListener('click', function() {
        if (!document.pictureInPictureElement) {
          video.requestPictureInPicture()
          .then((pipWindow) => {
            pipWindow.addEventListener('resize', (e) => {
              const {width, height} = e.target;
              windowSize.textContent = `w: ${width} h: ${height}`;
            });
          }).catch(error => {
            alert('failed to enable');
          });
        } else {
          document.exitPictureInPicture()
          .catch(error => {
            alert('failed to exit');
          });
        }
    });
  }
  video.addEventListener('enterpictureinpicture', function(event) {
    if (!confirm('Enable Picture in Picture?')) {
        document.exitPictureInPicture();
    }
  });
  video.addEventListener('leavepictureinpicture', function(event) {
    windowSize.textContent = '';
    alert('Leave Picture in Picture!');
  });
</script>