VideoJS seekable().end(0) always returns 0

I am trying to jump to a particular timestamp of a video, but using player.currentTime(someTime) always sends the video back to the start. Upon doing some research, I found that running player.seekable().end(0) always returns 0. I realize that this might be a problem with the fact that I'm using MP4, but I've tried using

ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4

to fix it and it doesn't work. Below is my code

<html>
<head>
    <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet"/>
<body>
<video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="264"
        autoplay="true"
        data-setup="{}">
    <source id="my-source" src="http://localhost:8000/some_video.mp4" type="video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
        >
    </p>
</video>

<button onClick="jump()">Jump</button>

<script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
<script>
    var VIDEO_JS = videojs('my-video');

    function jump() {
        VIDEO_JS.currentTime(10);
    }
</script>

For more context, the videos are taken from youtube, the audio is then split into vocals and accompaniment using spleeter, then ffmpeg is used to merge back the resulting audio files into the original video.

Any help would be appreciated. Thanks!

VideoJS seekable().end(0) always returns 0

0 Answers