31:Tcff,function videoControls(mediaElement, { secondaryMediaElements = [] } = {}) { // --- Options const sliderWidth = 180; const sliderStep = 0.01; // in seconds // --- DOM // Control const control = html`

`; // Button const buttonName = 'play'; const button = html``; control.appendChild(button); // Slider and output const sliderInput = html``; const sliderOutput = html``; const sliderLabel = html``; sliderLabel.appendChild(sliderInput); sliderLabel.appendChild(sliderOutput); control.appendChild(sliderLabel); // --- State // the state is managed by mediaElement (the video) Object.defineProperty(control, 'value', { enumerable: true, configurable: false, get: () => mediaElement.currentTime, set: value => { mediaElement.pause(); mediaElement.currentTime = value; onTimeUpdate(); } }); // --- Callback functions function onPlayPause() { control.play.innerText = mediaElement.paused ? 'Play' : 'Pause'; } function synchronizeTime() { const t = mediaElement.currentTime; secondaryMediaElements.forEach(d => { d.mediaElement.currentTime = t + d.timeOffset; }); } function onTimeUpdate() { const t = mediaElement.currentTime; if (mediaElement.paused) { synchronizeTime(); } control.i.valueAsNumber = t; sliderOutput.value = `${formatTime(t)} / ${formatTime(control.i.max)}`; control.dispatchEvent(new CustomEvent("input", { bubbles: true })); } function onDurationChange() { control.i.max = "" + mediaElement.duration; onTimeUpdate(); } function onPlayButton() { if (mediaElement.paused) { synchronizeTime(); mediaElement.play(); secondaryMediaElements.map(d => d.mediaElement.play()); } else { mediaElement.pause(); secondaryMediaElements.map(d => d.mediaElement.pause()); } onPlayPause(); } function onSliderChange() { mediaElement.currentTime = control.i.valueAsNumber; } // --- Events mediaElement.addEventListener('timeupdate', onTimeUpdate); mediaElement.addEventListener('durationchange', onDurationChange); mediaElement.addEventListener('pause', onPlayPause); mediaElement.addEventListener('play', onPlayPause); control.play.addEventListener('click', onPlayButton); control.i.addEventListener('input', onSliderChange); // --- Init onPlayPause(); onDurationChange(); // --- Clean control.dispose = () => { mediaElement.removeEventListener('timeupdate', onTimeUpdate); mediaElement.removeEventListener('durationchange', onDurationChange); mediaElement.removeEventListener('pause', onPlayPause); mediaElement.removeEventListener('play', onPlayPause); control.play.removeEventListener('click', onPlayButton); control.i.removeEventListener('input', onSliderChange); }; return control; }32:[{"id":"8124a5950c8db83b2bafb37674ac617557d173beaf0005b527a7d62057ed1744aa3a7fd30bcc2d5f4fb0af0f1096812f2f4dd4a73c3c8c72ebb39c56161e8dea","href":"https://static.observableusercontent.com/files/8124a5950c8db83b2bafb37674ac617557d173beaf0005b527a7d62057ed1744aa3a7fd30bcc2d5f4fb0af0f1096812f2f4dd4a73c3c8c72ebb39c56161e8dea","name":"HeadRoomTheDepartmentofChemistryGlassblowingShop.mp4.mp4","type":"video/mp4","lastModified":1604479439379.054,"size":6435336},{"id":"637589797e004a525d243181893656b5cb3316b288537dd941603a72eff5c97c04d4be49b9895c1790a10d459baa68923c4622df6629bb9d4fcb6764e3123bfe","href":"https://static.observableusercontent.com/files/637589797e004a525d243181893656b5cb3316b288537dd941603a72eff5c97c04d4be49b9895c1790a10d459baa68923c4622df6629bb9d4fcb6764e3123bfe","name":"firefox@1.png","type":"image/png","lastModified":1604481799903.185,"size":42945},{"id":"557e0b51ab2e5eeb32fef784072c7895d71882e6129a5a07b2a6157aad104ac42b336ec8f726b4b1e09bd65fabe9e61d3bf93a9642bfb72929b24527529e67f8","href":"https://static.observableusercontent.com/files/557e0b51ab2e5eeb32fef784072c7895d71882e6129a5a07b2a6157aad104ac42b336ec8f726b4b1e09bd65fabe9e61d3bf93a9642bfb72929b24527529e67f8","name":"chromium@1.png","type":"image/png","lastModified":1604481790358.1,"size":94842},{"id":"3c4801c1524cd1c0d16f108ea32683b66a379fc8d8fc4255f5902235a45953ae4eabc8d2e0ec8eb582f9d6a90317b1f376e57fb15fb67e7999173875cb369186","href":"https://static.observableusercontent.com/files/3c4801c1524cd1c0d16f108ea32683b66a379fc8d8fc4255f5902235a45953ae4eabc8d2e0ec8eb582f9d6a90317b1f376e57fb15fb67e7999173875cb369186","name":"t-rex-roar.mp3","type":"audio/mpeg","lastModified":1604507442151.399,"size":39868}] 2f:{"title":"Detached video controls","cells":[{"id":61,"value":"md`# Detached video controls\n\nAn input to play, pause and change the current time of a video.\n\n> Browsers provide controls to play, pause, or move into a video, but they are embedded into the video object. When a video is used as a texture for a 2D or 3D canvas (through a HTMLVideoElement object), you don't have access to these controls. With \\`videoControls\\`, you can remotely control the video behavior.\n\nUse:\n\n~~~js\nimport { videoControls } from '@severo/detached-video-controls'\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"viewof currentTime = videoControls(video)","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"md`Create a video element, and pass it as an argument to videoControls. The native video controls and the videoControls element are synchronized.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"video = md`