0
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/api/file/play/559',
            xhrFields: {
                responseType: 'blob'
            },
            beforeSend: (xhr) => {
                xhr.setRequestHeader('Range', 'bytes=' + 1200000 + '-')
            },
            success: (data, status, xhr) => {
                let blobData = new Blob([data], {type: 'octet/stream'})
                let el = document.querySelector('#jquery_jplayer_1 > video')
                const url = URL.createObjectURL(blobData)
                const htmlNewEl = url
                const htmlOldEl = el.currentSrc
                if (htmlOldEl && htmlOldEl.startsWith('blob:')) {
                    el.src = ''
                    URL.revokeObjectURL(htmlOldEl)
                }
                el.src = htmlNewEl
                el.load()
            }
        })

I don't think there's a video header.

If you try to play the video after calling the API, an error as shown in the picture below is displayed.

Uncaught (in Promise) DOMException: Failed to load because no supported source was found.

image_1 image_2

VC.One
  • 14,790
  • 4
  • 25
  • 57
박준영
  • 21
  • 1
  • Maybe after `let blobData = new Blob( ...etc` you should check length (in console) of `blobData`. If length is bigger than **1** then you might have something. What format is the video supposed to be? For example if MP4 then `blobData` should have these numbers at array positions (check in console): `[4]=102` and `[5]=116` and `[6]=121` ... If you have these numbers then you have an MP4 video header. Confirm yes or no about if they exist for you. – VC.One Feb 03 '22 at 21:32
  • If the range value of the request header starts with "bytes=0-", [4] = 102 is confirmed. However, [4]=102 is not confirmed when the starting value of Range is not 0. – 박준영 Feb 04 '22 at 03:40
  • Yes you can't just slice a file because the header is missing. You need to download **FFmpeg** (to create test files) and a **hex editor** to see the inside (bytes) of files. You need to check about **MP4 file structure**. Make it easy for yourself by using FFmpeg to make an MP4 video of 1 frame or maybe 1 second (_eg:_ convert 1 JPG to MP4). Use the hex editor to follow what the MP4 specifications are telling you. – VC.One Feb 05 '22 at 12:56
  • **(1)** Your MP4 is in two parts, first is the metadata (called "moov") and then following is the a/v data itself all mixed up in section called "mdat" You can trim the file by slicing only from inside the MDAT area. Make sure after slicing that you have a keyframe as your new start point in MDAT. A keyframe has bytes 0x65 (decimal = 101). For example if you have 100 MDAT bytes and you want to slice away range `[0] ... [49]` then make sure that `[50]=101` because when that [50] becomes the new [0] within the MDAT bytes, it must be a keyframe. You can find keyframe positions in `STSS` atom. – VC.One Feb 05 '22 at 13:13
  • **(2)** After slicing to start from a new keyframe (check STSS for where to find them), you must update the metadata in MOOV. See this Answer for useful advice: [Configure MP4 time](https://stackoverflow.com/a/18552833/2057709). Those specified atoms must all be updated to reflect the changes. Usually the entries are in order of frames, so 100 frames means 100 STSZ items (frame size in bytes) and 100 STTS items (frame timings in milisecs). To trim first half of video is to delete first 50 entries in each specified atom (stts, stsz, stss, etc). – VC.One Feb 05 '22 at 13:22
  • Another way is... Maybe try the HLS system of providing files. This means you make your long video into many smaller pieces of MP4 files (maybe you make each piece become 5 seconds long). Now you can watch the long video through a playlist of the pieces and to jump in time you jump just play the nearest correct piece and continue forwards into the playlist. Do you have a video tool like **FFmpeg** (makes it easier to create playlist format)? – VC.One Feb 10 '22 at 08:52

0 Answers0