30:[{"id":"c8012e4d6849dfcc78d35af84dc6a2ffc80defeb77c904d041d84820b25b35bd85a7da55bcec4905061320b0e129b2432bf0d73a052c1d815116c6bc7be794f8","href":"https://static.observableusercontent.com/files/c8012e4d6849dfcc78d35af84dc6a2ffc80defeb77c904d041d84820b25b35bd85a7da55bcec4905061320b0e129b2432bf0d73a052c1d815116c6bc7be794f8","name":"clouds.mp4","type":"video/mp4","lastModified":1584537960910.146,"size":2636971}] 2e:{"title":"Hello Picture-in-Picture","cells":[{"id":0,"value":"md`# Hello Picture-in-Picture\n\n

\n
This specification intends to provide APIs to allow websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.
\n
—Picture-in-Picture, https://w3c.github.io/picture-in-picture/
\n

\n\n## Custom Picture-in-Picture button`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"{\n // Hide button if Picture-in-Picture is not supported or disabled.\n if (!document.pictureInPictureEnabled || video.disablePictureInPicture) {\n throw new Error(`Your browser doesn't seem to support picture-in-picture.`);\n }\n\n const togglePipButton = html``;\n\n togglePipButton.addEventListener('click', function() {\n // If there is no element in Picture-in-Picture yet, let’s request\n // Picture-in-Picture for the video, otherwise leave it.\n if (!document.pictureInPictureElement) {\n video.requestPictureInPicture().catch(error => {\n // Video failed to enter Picture-in-Picture mode.\n throw new Error(error);\n });\n } else {\n document.exitPictureInPicture().catch(error => {\n // Video failed to leave Picture-in-Picture mode.\n throw new Error(error);\n });\n }\n });\n return togglePipButton;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"video = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\nVideo by [anwaroptin](https://pixabay.com/videos/mountains-clouds-4k-nature-cold-31175/)\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}