25:["$","title",null,{"children":"Detached video controls | encarnihinojosa | Observable"}] 49: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; }4a:[{"id":"637589797e004a525d243181893656b5cb3316b288537dd941603a72eff5c97c04d4be49b9895c1790a10d459baa68923c4622df6629bb9d4fcb6764e3123bfe","href":"https://static.observableusercontent.com/files/637589797e004a525d243181893656b5cb3316b288537dd941603a72eff5c97c04d4be49b9895c1790a10d459baa68923c4622df6629bb9d4fcb6764e3123bfe","name":"firefox@1.png","type":"image/png","lastModified":1680773325591.756,"size":42945},{"id":"557e0b51ab2e5eeb32fef784072c7895d71882e6129a5a07b2a6157aad104ac42b336ec8f726b4b1e09bd65fabe9e61d3bf93a9642bfb72929b24527529e67f8","href":"https://static.observableusercontent.com/files/557e0b51ab2e5eeb32fef784072c7895d71882e6129a5a07b2a6157aad104ac42b336ec8f726b4b1e09bd65fabe9e61d3bf93a9642bfb72929b24527529e67f8","name":"chromium@1.png","type":"image/png","lastModified":1680773325591.756,"size":94842},{"id":"8124a5950c8db83b2bafb37674ac617557d173beaf0005b527a7d62057ed1744aa3a7fd30bcc2d5f4fb0af0f1096812f2f4dd4a73c3c8c72ebb39c56161e8dea","href":"https://static.observableusercontent.com/files/8124a5950c8db83b2bafb37674ac617557d173beaf0005b527a7d62057ed1744aa3a7fd30bcc2d5f4fb0af0f1096812f2f4dd4a73c3c8c72ebb39c56161e8dea","name":"HeadRoomTheDepartmentofChemistryGlassblowingShop.mp4.mp4","type":"video/mp4","lastModified":1680773325591.756,"size":6435336},{"id":"3c4801c1524cd1c0d16f108ea32683b66a379fc8d8fc4255f5902235a45953ae4eabc8d2e0ec8eb582f9d6a90317b1f376e57fb15fb67e7999173875cb369186","href":"https://static.observableusercontent.com/files/3c4801c1524cd1c0d16f108ea32683b66a379fc8d8fc4255f5902235a45953ae4eabc8d2e0ec8eb582f9d6a90317b1f376e57fb15fb67e7999173875cb369186","name":"t-rex-roar.mp3","type":"audio/mpeg","lastModified":1680773325591.756,"size":39868},{"id":"ddba73db95ac0441cb38e0c255e902e4e0d7bf87e89b2c7250d1068b6b8b48f402bcd22d65019ff05e9acc81553d0f27b3c5b6033f40129c4756ff13d9de59fa","href":"https://static.observableusercontent.com/files/ddba73db95ac0441cb38e0c255e902e4e0d7bf87e89b2c7250d1068b6b8b48f402bcd22d65019ff05e9acc81553d0f27b3c5b6033f40129c4756ff13d9de59fa","name":"humildadypaciencia.mp4","type":"video/mp4","lastModified":1680773472128.807,"size":58025}] 29:{"id":"59bd16d1acf60d14","slug":null,"title":"Detached video controls","thumbnail":"f3559bd1440b2d4a7ca89425e630da550a92ec837c0cec3ec4ddecda2ed81f77","access_level":"public","create_time":"$D2023-04-06T09:28:45.591Z","update_time":"$D2023-04-06T09:38:02.951Z","view_time":null,"first_public_time":"$D2023-04-06T09:28:45.591Z","has_unpublished_edits":null,"fork":{"id":"eb5a6e83f36cc62c","slug":"detached-video-controls","title":"Detached video controls","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2778ae4b9f7c8e28","login":"encarnihinojosa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525e002ce2e89beada74603c3b431016239d151794650f8df8ba6d161baf5a94","tier":"starter_2024","bio":"Visual journalist (infographics and design).","followed_by_you":false,"follows_you":false},"version":624,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"13d052f98a812d71","login":"encarnihinojosa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525e002ce2e89beada74603c3b431016239d151794650f8df8ba6d161baf5a94","tier":null,"bio":"Visual journalist (infographics and design).","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"13d052f98a812d71","login":"encarnihinojosa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525e002ce2e89beada74603c3b431016239d151794650f8df8ba6d161baf5a94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"viewof currentTime = videoControls(video)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"video = md`