HTML5 60fps video stutter on Mac: self-hosted or youtube, framed or fullscreen
Categories
(Core :: Audio/Video: Playback, defect)
Tracking
()
People
(Reporter: andy_nc, Unassigned)
Details
Attachments
(1 file)
|
8.66 KB,
image/png
|
Details |
Screen Shot 2020-09-16 at 2.15.53 PM.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:80.0) Gecko/20100101 Firefox/80.0
Steps to reproduce:
Using Mac OS Firefox 80.0.1, 64Bit, tested also with deactivated add-ons.
Graphics: Intel Iris Pro 1536 MB and NVIDIA GeForce GT 750M.
Case 1) Embedded a Handbrake-exported 60fps 720p/1080p video via WordPress as HTML5 video on own website.
Tried both with and without web optimization Handbrake encoding setting.
The custom CSS for the video player is commented out completely, only genuine Firefox(?) or WordPress(?) player style is being used.
Case 2) Same videos used as sliders in Slider Revolution WordPress plugin on the same website.
Toggling gfx.direct3d11.use-double-buffering doesn't help.
Actual results:
Case 1) All of the videos stutter, regardless whether in small video player or in fullscreen.
Case 2) The videos almost never stutter, regardless of the size.
Expected results:
No 60fps 720-1080p videos should stutter, as it is the case in Safari and Chrome for Mac.
|
||
Comment 1•5 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Comment 2•5 years ago
|
||
Can you provide a link or attachment for the videos so we can investigate?
(In reply to Jon Bauman [:jbauman:] from comment #2)
Can you provide a link or attachment for the videos so we can investigate?
This video is confidential, as is my whole website. Can I send it to you privately?
I need to correct my report
Why is there no Edit button?...
So it doesn't matter, whether the video is used in a Slider Revolution plugin or as a self-hosted HTML5 video.
The real difference is:
When the 60fps 720p video is short (about 30sec), there is no stutter,
but when the same video is part of a longer video (about 3min 30sec), the stutter occurs at least every second time and sometimes it goes away, if you scroll back and forth on the timeline, but often it doesn't.
Apparently, this has something to do with the length of such video.
Addition
Just tested the same 60fps 720p 3:30 long video in Firefox Developer Edition (Mac) and no matter how often I jump back and forth on the timeline, the video never stutters. In normal Firefox it still stutters every other time when jumping on the timeline.
Both tests conducted with just one single tab, hardware acceleration - at default (recommended).
|
|
||
Comment 6•5 years ago
|
||
I need to correct my report
Why is there no Edit button?...
There should be (see above) for comments you added, including comment 0 which is the issue description, but perhaps that's a permission not all accounts have? If you need to edit the title, I can do that, but it looks fine to me as is.
|
|
||
Comment 7•5 years ago
|
||
This video is confidential, as is my whole website. Can I send it to you privately?
Sure, send me an attachment (or private link if it's too large) to my mozilla.com email.
(In reply to Jon Bauman [:jbauman:] from comment #7)
This video is confidential, as is my whole website. Can I send it to you privately?
Sure, send me an attachment (or private link if it's too large) to my mozilla.com email.
Apparently, I really don't have the privilege of editing my posts, not even the initial one... No such buttons in sight like those in your screenshot.
Just sent you the email with the link to my page.
Thanks!
|
|
||
Comment 9•5 years ago
|
||
It looks to me like an issue with the bandwidth of the serving host not being able to keep with with the data rate of the videos. When I see stuttering, it's due to the need to buffer additional data. The behavior appears to be the same on Chrome and Safari, though I notice that Safari buffers considerably more before initiating playback and to it happens less frequently. In any case, playing the videos again with the content already cached doesn't produce any stuttering for me, which tends to support this being a bandwidth issue.
I'd suggest adjusting buffering settings in your player JS if possible and/or encoding at a lower data rate, but I don't think there's any Firefox-specific issue here, so I'm going to close this. If you discover any additional information that points to this being an issue on the Firefox side, please don't hesitate to follow up here.
|
Reporter | |
Comment 10•5 years ago
|
||
(In reply to Jon Bauman [:jbauman:] from comment #9)
I playing the videos again with the content already cached doesn't produce any stuttering for me, which tends to support this being a bandwidth issue.
– Well this theory doesn't hold, because it stutters even when the whole video has been buffered. For me it's like I said – sometimes smooth playback, but every other time when jumping to different points it stutters.
I'd suggest adjusting buffering settings in your player JS if possible and/or encoding at a lower data rate, but I don't think there's any Firefox-specific issue here, so I'm going to close this.
– Lowering data rate is inacceptable, as it is already at 4600kbps for a 720p 60fps video. And JS settings shouldn't be the problem, as there are no such issues in other browsers.
Why close this ticket if the issue isn't solved?
As said before, this issue does not occur on the same Mac in Safari, Chrome and in Firefox Developer Edition for that matter – it's only specific for a regular Firefox and Waterfox for Mac.
|
|
||
Comment 11•5 years ago
|
||
My apologies for the delay in following up on this. Looking at the first (30s, no audio) video in the link you sent me privately:
I just tested this on Chrome Version 85.0.4183.121 (Official Build) (64-bit) on macOS 10.15.6 and see the same buffering issue that appears to be the server's inability to send the data fast enough to keep up with the video data rate. The behavior is slightly different in Safari Version 14.0 (15610.1.28.1.9, 15610), which won't even start playing the video until fully half of it is buffered, after which it plays successfully. I also tried Firefox Developer Edition 82.0b7 (64-bit), and observe the same network-related stalls.
Certainly network behavior could be different for clients in different physical locations and at different times according to load on the server, but what I've observed when downloading the file directly with curl multiple times is an average speed of slightly under 300 KBps (~2.3 Mbps). Since the file is encoded with a data rate of 4.58 Mbit/s, it's understandable why this can't keep up. For a 1280x720 60fps video, I think this data rate is excessive. Compare to this YouTube video which can be viewed at the same resolution and frame rate. If I download a version of it which uses the same codec as your video, its data rate is 1.23 Mbit/s. I also tried re-encoding your video at a data rate of 1.48 Mbit/s (low enough that it shouldn't stall on your server) and I can't tell a visual difference in quality from the 4.58 Mbit/s version.
|
|
Reporter | |
Comment 12•5 years ago
|
||
Hi Jon,
thanks for the follow-up!
I've tested it again on my Mac OS Sierra 10.12.6 in Chrome for Mac (Version 86.0.4240.80) – same as in previous tests, same as in Safari (Version 12.1.2 (12607.3.10)) – smooth playback, no stutter. In Safari the video starts right away, without any buffering delay.
By this example, you can clearly see that the issue is not the bitrate of the video. Moreover, I wonder, how 4k or 1080p 60fps Youtube videos are supposed to be played back without stutter? Because they must have a much higher bitrate.
Anything below 3.8kbps is inacceptable for my video. If you want to see the difference, you'll need to compare e.g. the pixelation of the moving sea water and the artifacts in the light flairs under the captions. Many more detailed spots are going missing in lower bitrates. What Youtube does to the videos in terms of encoding is also a shame! Btw, this same video, re-encoded by Youtube, was also stuttering a lot on their platform, which is another proof for the bitrate not being the issue here.
What kind of codec and software have you used for the encoding? I've used Handbrake, x264 codec, with/without web optimization.
So, if I experience smooth playback in some browsers, but not in regular Firefox and Waterfox, then it must be something within these browsers that handles the buffering differently.
|
|
||
Comment 13•5 years ago
|
||
(In reply to andy_nc from comment #12)
I've tested it again on my Mac OS Sierra 10.12.6 in Chrome for Mac (Version 86.0.4240.80) – same as in previous tests, same as in Safari (Version 12.1.2 (12607.3.10)) – smooth playback, no stutter. In Safari the video starts right away, without any buffering delay.
That's not what I experienced when I tried to play this video in Safari. It's possible you see different network effects due to your location relative to the server or due to caching at some layer, but what I observed in Safari (and I tried it again just now) was 29.35 seconds of buffering after clicking the play button before the video started playing. Repeated download tests with curl show that average download speeds from your server are under 300 Kbyte/s (~2.3 Mbit/s).
By this example, you can clearly see that the issue is not the bitrate of the video. Moreover, I wonder, how 4k or 1080p 60fps Youtube videos are supposed to be played back without stutter? Because they must have a much higher bitrate.
YouTube is able to provide consistently higher download bandwidth. We may observe different behaviors according to the network conditions between our local browsers and the hosts serving the videos, but when I download a test video from YouTube (without playing it, comparable to curling from your server), I observe an average transfer rate of ~5 Mbyte/s (~40 Mbit/s), or about 17x higher bandwidth than I'm able to achieve from your server.
There's no fixed correlation between the resolution and framerate of a video and its bitrate. The bitrate can vary widely according the codec and the encoding settings used. Consider this example video on YouTube which I mentioned previously. Despite having the same resolution and framerate as your video, its bitrate is less than 1/3rd of yours (4.58 Mbit/s vs 1.23 Mbit/s). Greater compression comes at the expense of reduced fidelity. Whether there's a perceivable degradation is subjective, but it's up to the web developer to decide what balance they wish to strike between the visual quality and the bandwith required. Services like YouTube dynamically select which version of a video to deliver according to the observed quality of a network connection. This sort of approach may be something worth investigating for your case.
What kind of codec and software have you used for the encoding? I've used Handbrake, x264 codec, with/without web optimization.
I'm not encoding anything, only downloading the video you've encoded.
So, if I experience smooth playback in some browsers, but not in regular Firefox and Waterfox, then it must be something within these browsers that handles the buffering differently.
That is true. Different browsers are free to handle buffering differently. In my tests with your video on your server, both Firefox and Chrome start the video playing more eagerly, but because the server can't keep up, it results in stalls. Safari is more conservative, resulting in a longer wait for buffering before starting playback, but no network stalls once playback starts. Unfortunately, there's no perfect solution here because a browser cannot know exactly how the network will behave in the future, so it makes a guess based on the bitrate of the video and the initially observed network performance. This is a tradeoff between the desire to start playback as soon as possible but also avoid buffering stalls, but unless a network connection whose bandwidth consistently exceeds the bitrate of the video can be established, some waiting will be required.
I'm sorry there's not a more satisfying answer for you, but I don't think there's anything more we can do with this issue.
|
|
Reporter | |
Comment 14•5 years ago
|
||
Thank you for the extensive explanation, Jon!
Actually, I was really wondering, why does my video footage (using 3D compositing etc.) need so much more bitrate in order to look good and to playback smoothly. Because it stutters even after re-encoding by Youtube and looks much much worse. However some other footage, taken straight from cameras at natively with 50 or 60fps is neither stuttering nor looking so pixelated.. I'd really need a digital video professional to answer that.. and what Handbrake settings or other codecs to use in order to avoid stuttering and higher bitrates. 90% of the info on the web about it is quite scrambled and doesn't offer straight and helpful answers unfortunaltey.
I was asking you about your re-encoding codecs because you've mentioned previously that you've done such a re-encoding test at 1.48 Mbit/s...
I will talk to my hosting provider then.
Cheers!
Description
•