3e:null 3f:["$","title",null,{"children":"Video Time Zoom | Sylvain Lesage | Observable"}] 45:T4cd,md`# Video Time Zoom A control to navigate into the frames of a video. Mouse-scroll when hovering the timeline to zoom in or out, click to select the current time. It's an example of how to use https://observablehq.com/@severo/timeline to generate timelines. Install: ~~~js import {videoTimeZoom} from '@severo/video-time-zoom' ~~~ Use: ~~~js viewof t = await videoTimeZoom(options) ~~~ It's an Observable's view, so that the \`t\` value will be updated on every interaction, while the video is playing or when the timeline is clicked. ### Options

\`src\`: the video source. Required
\`crossOrigin\`: the video [CORS setting](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin). Defaults to undefined
\`width\`: the control width in pixels. Defaults to Observable's \`width\`
\`getTracks\`: [advanced] a function to generate the \`tracks\` option of [\`stack\`](https://observablehq.com/d/505ccf83529f32b3). The function takes an \`options\` argument, with \`options = {frameAt, src, crossOrigin, aspectRatio}\`. Defaults to two timelines: slit tear thumbnails and a spring ruler

`46:Tb57,async function videoTimeZoom(options = {}) { // Validation const { src, crossOrigin, width, getTracks } = validate(options); const metadata = await vidvid.info(src, { crossOrigin }); const initCurrentTime = 0; const aspectRatio = metadata.videoWidth / metadata.videoHeight; const duration = metadata.duration; // We use the state as an intermediary that throttles the changes, // and decides the actual state (consensus) const initState = { currentTime: { value: initCurrentTime, timeout: 16 } }; const state = createState(initState); // Create the control const control = html`

`; const controlInvalidation = disposal(control); const id = DOM.uid().id; control.setAttribute('id', id); control.append(html` `); const video = html`