MP4 player (video.js) control bar buggy

[Styx]

Hello,

I am recording the high resolution stream of my camera using H264 passthrough. I use the default settings which creates events of 10 minutes long. I use the low resolution settings to detect the events.
All that works well, I do get the red highlights when looking at the video recording (high resolution).

However I noticed some glitches when watching those video (using the MP4 player which uses the video.js library I believe):
- first the duration of the video is not accurate initially, most of my 10 minutes video only show 5 minutes and 38 seconds at first, this changes as the video plays and gets closer to the end.
- when I click in the control bar to seek at a certain position in the video (i.e. i want to skip and directly go to the part where I have the red highlighting from the alerts) then I do not actually get to the right time due to the video player not estimating properly the duration of the video. In order to get to it, i need to fully load the video first by clicking multiple times toward the end of the video to force it to load fully and properly report the full duration of the video. Then and until then things work as expected.

I recorded a small video put as a gif here to illustrate the issue:

seekBug.gif (809.49 KiB) Viewed 39330 times

As you can see, it reports the duration as 5:38 initially.
Then I go and click on the section highlighted in red, hoping to jump to the interesting part of the video. You can see the current time jumps to 3:32. Unfortunately, there is nothing going on the video at that time and the reason is: the alert is not really at 3:32 in the video, it's later.
To get it right, i then click toward the end of the video, and you will notice as I do so that the current time jumps to 5:25 and immediately you see the blue bar retracts and the total duration of the video increases to 6:36.
I then repeat this action several times until i get the video to fully load (duration to show 10:01)
Then finally I can click back on the section highlighted in red which now shows at 6:08 which is the correct time corresponding to the alert.

Hopefully this illustrate the issue.

Somehow: when the page and video gets loaded, the duration of the video is not correct and thus prevent the control bar from being accurate until the video is fully loaded.

Anybody else has this issue ? Any workaround or way to fix this ?

[Styx]

I would like to bump this thread as I did not see any reply.

I do spent quite some time just trying to get to the right time in the video because of this weird behavior and would love to see it addressed in the future.

This occurs on all my devices (windows, Linux, android, ios..)

I cannot believe I am the only one who noticed this issue ?

[Styx]

I finally found the reason for this issue, and I found a potential fix/workaround idea.

So the main reason is because I am using h264 Camera Passthrough to record. And it turns out that in this mode, the resulting recorded file seems to be a pure h264 bitstream, and not a real mp4 (as in an mp4 container containing an h264 bit stream).
Because of that, there is no metadata for video.js to read to find out the length of the video. It needs instead to figure it out by counting frames, framerate, bitrate, ..
So depending on the browser you use, they have different ways of finding the duration of a raw h264 bitstream:
- firefox (which I use) does load only a portion of the video (with some readahead), and thus will estimate the duration of the video to be only that pre-loaded portion. And as you progress in the video, it will preload more and update the duration... (see the illustration in the initial post).
- Edge does preload the full video upfront, thus it can figure out the full length (but it can take a while to preload a full video if they are big, and in my case they are , as i save my videos by chunk of 1 hour).

So what I did to try and fix this, is I picked one of my recorded event and ran the following ffmpeg command on it to repackage it inside a real mp4 container:

Code: Select all

mv 15243-video.mp4 15243-video.mp4.orig
ffmpeg -i 15243-video.mp4.orig -c:v copy -f mp4 15243-video.mp4

And I went and checked now in zoneminder that specific event and .. tadam !! it worked right away: using firefox, as soon as the page loads, it instantly shows the full duration of the video (1 hour) and also starts streaming the video right away (no preloading delay or anything).

So I think the workaround/fix would be, if possible for the developers, to add a step at the end of the recording of an event to run the ffmpeg command indicated above for events generated from h264 Camera Passthrough.

@iconnor, does that sound like a possible solution ?

[iconnor]

No. The issue here is what movflags we use. Different values seem to have different tradeoffs.
Currently we default to frag_keyframe+empty_moov

Some people like movflags=frag_custom+dash+delay_moov

Please try out different values and report back. This goes in Monitor->Storage->Options

[Styx]

Thanks iconnor for taking the time to reply.

I did test those different settings, but they do not make a difference regarding the behavior described in the 1st post.

I tried a lot of different combination of different flags (frag_keyframe/frag_custom delay_moov/empty_moov, dash, default_base_moof, ..) without success.

After reading about fragmented MP4, i decided to try non fragmented, by cancelling the default option you put and using (movflags=-empty_moov) and that fixed the issue described in the 1st post, however, it prevents from viewing the current recording until it's done.

As I was looking into the generated mp4 using Bento4 mp4dump, i noticed the following:
Fragmented MP4 have a duration of 0 in the moov, wheter you use empty_moov or delay_moov (and any other flag combination with this), it will always be duration of 0 in the moov.

Code: Select all

[ftyp] size=8+16
  major_brand = iso5
  minor_version = 200
  compatible_brand = iso6
  compatible_brand = mp41
[moov] size=8+815
  [mvhd] size=12+96
    timescale = 1000
    duration = 0
    duration(ms) = 0
 ...
 
 [ftyp] size=8+20
  major_brand = iso5
  minor_version = 200
  compatible_brand = iso6
  compatible_brand = mp41
  compatible_brand = dash
[moov] size=8+851
  [mvhd] size=12+96
    timescale = 1000
    duration = 0
    duration(ms) = 0
 ...
 

And I believe that's what is triggering the behavior described in 1st post, somehow it needs to "calculate" the total duration from all the fragments, and because of its default behavior, firefox only downloads ahead a certain amount of fragments and not all of them and thus only figures out the duration for all those fragments which is not the full duration of the video. As more of the video fragments gets downloaded as the video is being read, the duration is being updated.

Now when using non fragmented mp4, the total duration is right there in the moov thus firefox immediately finds out the total duration.

Code: Select all

[ftyp] size=8+24
  major_brand = isom
  minor_version = 200
  compatible_brand = isom
  compatible_brand = iso2
  compatible_brand = avc1
  compatible_brand = mp41
[free] size=8+0
[mdat] size=8+155324658
[moov] size=8+46027
  [mvhd] size=12+96
    timescale = 1000
    duration = 301678
    duration(ms) = 301678
...

So .. while I was able to resolve the issue in the 1st post with movflags=-empty_moov the drawback of this is that now I cannot watch the current recording until it's done (and I record using 1 hour long sections)

I wish somehow, when using fragmented MP4 there was an ffmpeg option to regularly update the duration in the moov as more fragments gets added, I actually wonder why it's not done by default and the duration is left at 0 all along.

In any case, thanks you for pointing me in the right direction.

[mykeernst]

I've noticed it before too, but I didn't have enough skills to fix it somehow. It is straightforward to work and live for those who understand programming, as it can often help in work and life in general. For example, I constantly want to take programming courses, but I don't have time because of my work as a videographer and photographer. So far, I have often encountered the problem of writing some code to work in various programs, but I can't figure out how it works. Well, at least there are programs by type [deleted] who change the video format themselves, and I don't have to do anything there. I think that during the holidays I will start learning to program

[lightguy48]

I know this thread is kind of dated but I've noticed what I think is a similar issue, I'm using FireFox 97.0.1 and when I go to view a H.264 passthrough video (using MOCORD 10 min segments) if I try to jump to an event indicated by the red bar I see nothing of the event, but the video time stamp did not advance more than about 30 seconds yet the alarm event was like 4 minutes in.

It appears to me FireFox is not loading the entire video, if you look at FireFox scroll bar at the bottom it only shows roughly 3 1/2 minutes of video is loading instead of 10 minutes

When I use Chrome there is a delay while it caches/loads the video and then it begins playback, it's like Firefox loads part of the video and stops and never completes loading the remainder of the video.

[dougmccrary]

Are you actually using 1.35, or 1.36?

[lightguy48]

I am on 1.36.12 currently, I just found this thread when searching for keywords similar to what I'm experiencing

[dougmccrary]

Do you have movflags=frag_custom+dash+delay_moov
in Optional Encoder Parameters (?) (see iconnor's post above)

I only have one camera that seems to need that, so I don't know why some others just have a crf and seem to work as expected.

[lightguy48]

Currently I don't have any options set on the monitor, so does the movflags=frag_custom+dash+delay_moov seem to resolve the issue? I will try putting it in this evening and see what happens.