[Feature] Add data-values attributes to div.scene-specs-overlay span elements; add span.overlay-duration class; report framerate shorthand

[echo6ix]

The reported video data within div.scene-specs-overlay could still use a bit of polishing, including the addition of displaying overlay framerate appended to the resolution to complete the resolution and framerate shorthand that's now commonly used.

1. Duration still requires its own span element and class, <span class="overlay-duration"> so it can be properly styled
2. Each span element within div.scene-specs-overlay could get a data-value attribute. This will let devs/users manipulate the element based on its value
3. Add framerate shorthand in this section (only two additional characters), where resolution and framerate shorthand is just the framerate (always rounded up to the nearest integer) appended to the resolution with no spaces.

E.g. of resolution and framerate shorthand:

• 1080p60
• 1080p50
• 1080p30
• 1080p25
• 1080p24

Basic hypothetical CSS

.overlay-framerate {
    display: none; /* hide the framerate by default */
}

.overlay-framerate[data-value="50"],
.overlay-framerate[data-value="60"],
.overlay-framerate[data-value="100"],
.overlay-framerate[data-value="120"] {
    display: contents; /* show only high framerates */
}

Basic structure of the HTML

<span class="overlay-resolution" data-value="1080p">1080p</span>
<span class="overlay-framerate" data-value="60">60</span>
<span class="overlay-duration" data-value="1:30:22">1:30:22</span>