2b:null 2c:["$","title",null,{"children":"Detached video controls | Sylvain Lesage | Observable"}] 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:{"id":"eb5a6e83f36cc62c","slug":"detached-video-controls","title":"Detached video controls","thumbnail":"e20fc875583f65f1b1fc4705e8824a6d683e94464e13cd5d2fef4870fce863ef","access_level":"public","create_time":"$D2020-11-04T08:34:34.008Z","update_time":"$D2021-03-14T14:14:29.380Z","view_time":null,"first_public_time":"$D2020-11-04T16:33:21.351Z","fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":614,"publish_version":614,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":9,"collection":{"id":"a048411b727e4888","slug":"inputs","title":"Inputs","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":536,"value":"viewof currentTime = videoControls(video)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":16,"value":"video = md`