S
SolidJS•2w ago
Optimum

mediakit/video - setting `currentTime`

Using mediakit, I'm trying to create a master seek bar that sets the percent duration for multiple videos, so I need to be able to control the currentTime of the video manually. Its createVideo hook returns a component that accepts its own props to pass to the underlying <video> element. Example: 
const { Video, play, pause, paused, canBeUnmuted, isVideoLoading } = createVideo({...})

return (
  <Video
    onLoadedMetadata={handleLoadedMetadata}
    onSeeked={handleSeek}
  />
)
const { Video, play, pause, paused, canBeUnmuted, isVideoLoading } = createVideo({...})

return (
  <Video
    onLoadedMetadata={handleLoadedMetadata}
    onSeeked={handleSeek}
  />
)
Now I thought I could try passing currentTime as a prop, but it seems it is ignored. As far as I can tell, currentTime is handled by a ref inside of createVideo separately from the props that is not exposed. Is there a "clean" method of controlling the current time of a video or a hacky way of getting the dom element manually and setting it in a way that informs Solid? Any ideas are appreciated!
GitHub
mediakit/packages/media/src/video/createVideo.tsx at e5dec83d4d8003...
A set of utilities to use with your Solid apps. Contribute to solidjs-community/mediakit development by creating an account on GitHub.
5 Replies
Alex Lohr
Alex Lohr•2w ago
you also get video in the output object, which is the ref.
Optimum
OptimumOP•2w ago
Ah, right, so you can just make your own ref 
let video!: HTMLVideoElement;

const setTime = () => {
  video.currentTime = 3.0
}

return (
  <>
    <Video
      ref={(v) => video = v}
      onLoadedMetadata={handleLoadedMetadata}
      onSeeked={handleSeek}
    />
    <button onClick={setTime}>Pause</button>
  </>
)
let video!: HTMLVideoElement;

const setTime = () => {
  video.currentTime = 3.0
}

return (
  <>
    <Video
      ref={(v) => video = v}
      onLoadedMetadata={handleLoadedMetadata}
      onSeeked={handleSeek}
    />
    <button onClick={setTime}>Pause</button>
  </>
)
Alex Lohr
Alex Lohr•2w ago
While that could work, too, what I meant was: 
const { Video, video, play, pause, paused, canBeUnmuted, isVideoLoading } = createVideo({...});
// video contains ref
const { Video, video, play, pause, paused, canBeUnmuted, isVideoLoading } = createVideo({...});
// video contains ref
Optimum
OptimumOP•2w ago
Oh, I thought you could not access a ref from a component unless the ref is in scope? Because Video is technically just a function that returns JSX , and that returned JSX is actually where the video ref is bound
Alex Lohr
Alex Lohr•5d ago
You can only have refs in DOM elements. Especially let-refs only work with DOM elements, because it relies on the DOM-expressions transpiler to make those work and it will only do that for DOM elements.

Did you find this page helpful?