Adds "previousslide" and "nextslide" actions to the existing Media Session API.

This will enable developers of video conferencing websites to handle these actions from browser UI. For example, if the user puts their slides presentation into a picture-in-picture window, the browser could display buttons for navigating through slides. When the user clicks those, the website handles them through the Media Session API.

```js let slideNumber = 1;

togglePipButton.addEventListener("click", async () => { try { if (video !== document.pictureInPictureElement) await video.requestPictureInPicture(); else await document.exitPictureInPicture(); } catch (error) { log(> Argh! ${error}); } });

try { navigator.mediaSession.setActionHandler("previousslide", () => { log('> User clicked "Previous Slide" icon.'); if (slideNumber > 1) slideNumber--; updateSlide(); }); } catch (error) { log('Warning! The "previousslide" media session action is not supported.'); }

try { navigator.mediaSession.setActionHandler("nextslide", () => { log('> User clicked "Next Slide" icon.'); slideNumber++; updateSlide(); }); } catch (error) { log('Warning! The "nextslide" media session action is not supported.'); }

/ Picture-in-Picture canvas /

const canvas = document.querySelector("canvas"); canvas.width = 1024; canvas.height = 512; updateSlide();

const video = document.createElement("video"); video.srcObject = canvas.captureStream(); video.muted = true; video.play();

/ Utils /

function updateSlide() { const ctx = canvas.getContext("2d"); ctx.fillStyle = "grey"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "white"; ctx.font = "100px Google Sans,arial,sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(slide ${slideNumber}, canvas.width / 2, canvas.height / 2, canvas.width); } ```

```html

<iframe id="iframe"> <video>...</video> </iframe> <script> iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({ title: 'Never Gonna Give You Up', ... }); </script>

```