[vasilich-tregub]

This edit corrects page's example application which unfortunately produces a garbled output for fps. To compute fps, the edited app uses a metadata.presentedFrames field data instead of local var paintCount used by original code and incremented manually in each callback function call. The fps calculation is restricted to the first-time playback; video controls are disabled for this run to simplify the logic of calculation. Metadata are presented as in original app.

Description

This edit corrects page's example application which unfortunately produces a garbled output for fps. To compute fps, the edited app uses a metadata.presentedFrames field data instead of local var paintCount used by original code and incremented manually in each callback function call. The fps calculation is restricted to the first-time playback; video controls are disabled for this run to simplify the logic of calculation. Metadata are presented as in original app.

Motivation

The original example on this page fails to compute frame-per-sec value for a video clip viewed. The calculation on the page produces a garbled output. This bug is trivially corrected with the help of metadata info, but the code becomes complicated if the purpose is to compute fps on the fly while accommodating every user action as pause-seek-replay. So, I restricted the fps calculation to an undisturbed first-time playback that runs from the beginning to the end of the media. To present the most of information, I log the calculation results to the page for every frame of the media which admittingly helps user understand the procedure more clearly. The metadata printout, as in the original application, accompanies this first-time and further playback runs to help the user study how user action reveal itself in the metadata content.

Additional details

Related issues and pull requests

[vasilich-tregub]

Lint failed with 'Fail if any issues pending'; I posted an issue #46316

[Josh-Cena]

Please see the log output. This has nothing to do with the lack of a linked issue. (And in general, if you already submitted a PR, there's no need for an issue.)

🪵 Logs from Prettier formatter:
Checking formatting...
[warn] files/en-us/web/api/htmlvideoelement/requestvideoframecallback/index.md
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

You can use Prettier playground to format the files online (configuration pre-filled): https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBiABABwIYGd7owAWc6CMAlgE6kBmFANqSTSADQgSaXS7KjYqVCAHcACoIR8U2BiOwBPPhwBGVbGADWcGAGVsAWzgAZClDjIYVAK5xV6rTt04wZgOaWbdkLjgGKnrYccAAemHBUFEawsgAqEVCCFHDStLK+HLjuTACK1hDwyGkMGSAAVrghutlweQUWSMWlAI758GLCmNIgeAC05nAAJkPsIFbYjO4AwhAGBtjIPQwMo1lQbkwAgjBWFCrW7RGm5kXp3kQwBgwA6kQU8LgucLpS9xQAbvcKi2C4yiDvWwASSgw1gujAkW4m1BuhgCiYpxK3kwwl813UmEWqJSEXeFg4Zl8VBgHWwbnmSNKOCoxMW8yomkGoigo1RZhg1wog2IyAAHAAGDg0VrUOBkikLRpnDgwbAqLk8ojIABMHGsvli8tSMpAfhUQ2Gg2M2HW1nJcAAYhAqPMdu5FtgDhAQABfV1AA