HTML5 Video: Ultimate Integration Guide With Comparison of Results

Quick summary ↬ Have you ever wondered how various HTML5 video options (video tag options) will affect how the video is rendered in browsers? Here you will find the answer. You will also finally know if there is a correct answer to the question of which video format gives the best results in terms of size and performance.
Posted , by Denis Sokol (Last update )

If you came here hoping to find a complete guide on how HTML5 video with a native browser players renders in different browsers, then you've come to the right place. When we were given the task of setting up HTML5 for the iSocket Systems blog I wrote this post for testing results and now I share this with you.

By opening this page in different browsers, different operation systems, different screen resolutions, you can find out for yourself what and how works best for you. You can also open Chrome DevTools (F12) and see a lot of useful information (of course, you know that). You will also get useful notes on how to manipulate videos with ffmpeg. Information on how compression affects the quality of HTML5 videos and comparisons with YouTube can be found in my How Resizing and Scaling Affects Quality article.

Conclusion (first conclusion, then demo):

  • mp4→webm (mp4 first) because original webm is bigger and Chrome still supports mp4 (h264) (however, this is only true for videos recorded from the DevTools device emulator - see differences for iPhone in section 4.3);
  • a poster is required, otherwise iOS Safari (iPhone) will show a blank screen;
  • if the poster is used, then it makes no sense to use metadata preloading, especially since this is not guaranteed by the specification;
  • iOS Safari (iPhone) will not play webm;
  • some strange issues with progress bar when playing original webm.

See section 4. MAKING VIDEOS below to understand how the videos for these examples were created.

1. HTML5 VIDEO ON MOBILE DEVICES

mp4webm:

(DEFAULT for video recorded by device emulator) mp4→webm, no preload, with poster

<video controls="controls" preload="none" poster="/media/video/demo-2m-mobile.jpg">
    <source src="/media/video/demo-2m-mobile.mp4" type="video/mp4">
    <source src="/media/video/demo-2m-mobile.webm" type="video/webm">
</video>

webmmp4:

webm→mp4, no preload, with poster (POSSIBLE DEFAULT IN THE FUTURE)

<video controls="controls" preload="none" poster="/media/video/demo-2m-mobile.jpg">
    <source src="/media/video/demo-2m-mobile.webm" type="video/webm">
    <source src="/media/video/demo-2m-mobile.mp4" type="video/mp4">
</video>

mp4webm+meta:

mp4→webm, preloaded metadata, with poster

<video controls="controls" preload="metadata" poster="/media/video/demo-2m-mobile.jpg">
    <source src="/media/video/demo-2m-mobile.mp4" type="video/mp4">
    <source src="/media/video/demo-2m-mobile.webm" type="video/webm">
</video>

webmmp4+meta:

webm→mp4, preloaded metadata, with poster

<video controls="controls" preload="metadata" poster="/media/video/demo-2m-mobile.jpg">
    <source src="/media/video/demo-2m-mobile.webm" type="video/webm">
    <source src="/media/video/demo-2m-mobile.mp4" type="video/mp4">
</video>

mp4webm-noposter:

mp4→webm, preloaded metadata, no poster

<video controls="controls" preload="metadata">
    <source src="/media/video/demo-2m-mobile.mp4" type="video/mp4">
    <source src="/media/video/demo-2m-mobile.webm" type="video/webm">
</video>

webmmp4-noposter:

webm→mp4, preloaded metadata, no poster

<video controls="controls" preload="metadata">
    <source src="/media/video/demo-2m-mobile.webm" type="video/webm">
    <source src="/media/video/demo-2m-mobile.mp4" type="video/mp4">
</video>

2. HTML5 VIDEO ON DESKTOP

mp4webm-desk:

(DEFAULT for video recorded by device emulator) mp4→webm, no preload, with poster

<video controls="controls" preload="none" poster="/media/video/demo-2m-desktop.jpg">
    <source src="/media/video/demo-2m-desktop.mp4" type="video/mp4">
    <source src="/media/video/demo-2m-desktop.webm" type="video/webm">
</video>

webmmp4-desk:

webm→mp4, no preload, with poster (POSSIBLE DEFAULT IN THE FUTURE)

<video controls="controls" preload="none" poster="/media/video/demo-2m-desktop.jpg">
    <source src="/media/video/demo-2m-desktop.webm" type="video/webm">
    <source src="/media/video/demo-2m-desktop.mp4" type="video/mp4">
</video>

mp4webm+meta-desk:

mp4→webm, preloaded metadata, with poster

<video controls="controls" preload="metadata" poster="/media/video/demo-2m-desktop.jpg">
    <source src="/media/video/demo-2m-desktop.mp4" type="video/mp4">
    <source src="/media/video/demo-2m-desktop.webm" type="video/webm">
</video>

webmmp4+meta-desk:

webm→mp4, preloaded metadata, with poster

<video controls="controls" preload="metadata" poster="/media/video/demo-2m-desktop.jpg">
    <source src="/media/video/demo-2m-desktop.webm" type="video/webm">
    <source src="/media/video/demo-2m-desktop.mp4" type="video/mp4">
</video>

mp4webm-noposter-desk:

mp4→webm, preloaded metadata, no poster

<video controls="controls" preload="metadata">
    <source src="/media/video/demo-2m-desktop.mp4" type="video/mp4">
    <source src="/media/video/demo-2m-desktop.webm" type="video/webm">
</video>

webmmp4-noposter-desk:

webm→mp4, preloaded metadata, no poster

<video controls="controls" preload="metadata">
    <source src="/media/video/demo-2m-desktop.webm" type="video/webm">
    <source src="/media/video/demo-2m-desktop.mp4" type="video/mp4">
</video>

3. "SOMETHING-WRONG" EXAMPLES

Conclusion:

  • Chrome will NOT show preview even if metadata preloaded but the poster is missed (compare with noposter demo above);
  • The poster will be shown even if video is missed, click on play will be ignored (bad user experience);
  • use CSS to draw a frame to fit the video size for the “something-wrong” cases.

mp4webm+meta (poster missed but video exists, mobile):

mp4→webm, preloaded metadata, with poster (but poster is missed)

<video controls="controls" preload="metadata" poster="poster_missed.jpg">
    <source src="/media/video/demo-2m-mobile-poster_missed.mp4" type="video/mp4">
    <source src="/media/video/demo-2m-mobile-poster_missed.webm" type="video/webm">
</video>

mp4webm+meta (poster missed but video exists, desktop):

mp4→webm, preloaded metadata, with poster (but poster is missed)

<video controls="controls" preload="metadata" poster="poster_missed.jpg">
    <source src="/media/video/demo-2m-desktop-poster_missed.mp4" type="video/mp4">
    <source src="/media/video/demo-2m-desktop-poster_missed.webm" type="video/webm">
</video>

mp4webm+meta (poster exists but video missed, mobile):

mp4→webm, preloaded metadata  (but video is missed), with poster

<video controls="controls" preload="metadata" poster="/media/video/demo-2m-mobile-poster.jpg">
    <source src="/media/video/demo-video_missed.mp4" type="video/mp4">
    <source src="/media/video/demo-video_missed.webm" type="video/webm">
</video>

If you want a nice "video should be here" representation, or some sort of fallback if the file has been deleted, use CSS to draw a border that matches the video's size, as I mentioned. That's where the aspect ratio is convenient for you. You will need to do something like what we did in your CSS:


.blog-detail .blog-video-tag {
    width: 396px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    aspect-ratio: 0.561;
    min-height: 220px;
}

Compare with the iPhone X case in section 4.3 where you get a different aspect ratio.

mp4webm+meta (poster exists but video missed, desktop):

mp4→webm, preloaded metadata  (but video is missed), with poster

<video controls="controls" preload="metadata" poster="/media/video/demo-2m-desktop-poster.jpg">
    <source src="/media/video/demo-video_missed.mp4" type="video/mp4">
    <source src="/media/video/demo-video_missed.webm" type="video/webm">
</video>

4. MAKING VIDEOS

4.1. Recording

The videos for the demo above  (2 minutes videos) were recorded using the Screen Recorder app in Edge with device emulation in DevTools. The same applies to the videos in the next section 5. However, the videos for the section 4.3 iPhone Video Recording and Conversion below were recorded on iPhone X.

iPhone SE 375x667 device emulation, Screen Recorder app HQ video/webm:codecs=vp8,vp9,opus without sound sharing gives for demo-2m-mobile.webm:

General
Format                         : WebM
Format version                 : Version 4
File size                      : 12.1 MiB
Writing application            : Chrome
Writing library                : Chrome
IsTruncated                    : Yes
Video
ID                             : 1
Format                         : VP8
Codec ID                       : V_VP8
Width                          : 396 pixels
Height                         : 706 pixels
Display aspect ratio           : 0.561
Frame rate mode                : Variable
Compression mode               : Lossy
Language                       : English
Default                        : Yes
Forced                         : No

Note you get 12.1MB for 2 minutes of .webm video at 396x706 pixels.

1126x750 Blog Desktop (1192x794 ratio 3:2, 1.5) gives for demo-2m-desktop:

General
Format                         : WebM
Format version                 : Version 4
File size                      : 9.41 MiB
Writing application            : Chrome
Writing library                : Chrome
IsTruncated                    : Yes
Video
ID                             : 1
Format                         : VP8
Codec ID                       : V_VP8
Width                          : 1 192 pixels
Height                         : 794 pixels
Display aspect ratio           : 3:2
Frame rate mode                : Variable
Compression mode               : Lossy
Language                       : English
Default                        : Yes
Forced                         : No

Note you get 9.41MB for 2 minutes of .webm video at 1192x794 pixels.

4.2. Video Conversion

Convert to mp4 with h246 codec that iPhone will like (there is no sound in the file, but we set ACC codec):

# ffmpeg -i demo-2m-desktop.webm -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart -r 24 demo-2m-desktop-aac.mp4
# ls -l -h demo-2m-desktop.webm | awk '{print $5}'
9.4M
# ls -l -h demo-2m-desktop-aac.mp4 | awk '{print $5}'
2.2M

Similar, but set no sound:

# ffmpeg -i demo-2m-desktop.webm -c:v libx264 -profile:v main -vf format=yuv420p -an -movflags +faststart -r 24 demo-2m-desktop-noaac.mp4
# ls -l -h demo-2m-desktop-noaac.mp4 | awk '{print $5}'
2.2M

2.2MB for .mp4 from the original 9.4MB .webm in both cases. However, when you convert a file of the same size with sound to a file without sound, the resulting file is larger. Conclusion: If you don't plan on using audio in your video, don't share audio when recording your screen.

Here is the metadata for the converted mobile .mp4:

General

Format                         : MPEG-4
Format profile                 : Base Media
Codec ID                       : isom (isom/iso2/avc1/mp41)
File size                      : 2.47 MiB
Duration                       : 2 min 0 s
Overall bit rate               : 171 kb/s
Writing application            : Lavf58.76.100

Video
ID                             : 1
Format                         : AVC
Format/Info                    : Advanced Video Codec
Format profile                 : Main@L3
Format settings                : CABAC / 4 Ref Frames
Format settings, CABAC         : Yes
Format settings, Reference fra : 4 frames
Codec ID                       : avc1
Codec ID/Info                  : Advanced Video Coding
Duration                       : 2 min 0 s
Bit rate                       : 169 kb/s
Width                          : 396 pixels
Height                         : 706 pixels
Display aspect ratio           : 0.561
Frame rate mode                : Constant
Frame rate                     : 24.000 FPS
Color space                    : YUV
Chroma subsampling             : 4:2:0
Bit depth                      : 8 bits
Scan type                      : Progressive
Bits/(Pixel*Frame)             : 0.025
Stream size                    : 2.44 MiB (99%)
Writing library                : x264 core 163
Encoding settings              : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x1:0x111 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=12 / lookahead_threads=2 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=24 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00
Language                       : English
Color range                    : Limited
Matrix coefficients            : BT.470 System B/G
Codec configuration box        : avcC

4.3. iPhone Video Recording and Conversion

Sometimes you need to record video on your phone, and not on emulators, especially when it comes to iPhone. So the workflow will be different.

The original video for all examples below was recorded on the iPhone X with a native Screen Recording app. It turned out to be .mp4 and not .mov and to be honest I'm not sure if this can be configured but I'm glad it's already .mp4 so I don't have to convert so I didn't investigate.

The original 1-minute video turned out to be 52.2 MB with the following metadata (note the aspect ratio of 0.461, which is different from all of the above for mobile cases when we're recording from device emulators, I'll get to that later):

General
Format                         : MPEG-4
Format profile                 : Base Media / Version 2
Codec ID                       : mp42 (isom/mp41/mp42)
File size                      : 54.3 MiB
Duration                       : 1 min 1 s
Overall bit rate               : 7 344 kb/s
Performer                      : ReplayKitRecording

Video
ID                             : 2
Format                         : AVC
Format/Info                    : Advanced Video Codec
Format profile                 : High@L4.2
Format settings                : CABAC / 2 Ref Frames
Format settings, CABAC         : Yes
Format settings, Reference fra : 2 frames
Codec ID                       : avc1
Codec ID/Info                  : Advanced Video Coding
Duration                       : 1 min 1 s
Source duration                : 1 min 2 s
Bit rate                       : 7 329 kb/s
Width                          : 886 pixels
Height                         : 1 920 pixels
Display aspect ratio           : 0.461
Frame rate mode                : Variable
Frame rate                     : 45.060 FPS
Minimum frame rate             : 1.496 FPS
Maximum frame rate             : 60.000 FPS
Color space                    : YUV
Chroma subsampling             : 4:2:0
Bit depth                      : 8 bits
Scan type                      : Progressive
Bits/(Pixel*Frame)             : 0.096
Stream size                    : 54.2 MiB (100%)
Source stream size             : 54.2 MiB (100%)
Title                          : Core Media Video
Encoded date                   : UTC 2022-05-16 23:15:17
Tagged date                    : UTC 2022-05-16 23:15:18
Color range                    : Limited
colour_range_Original          : Full
Color primaries                : BT.709
Transfer characteristics       : sRGB/sYCC
Matrix coefficients            : BT.709
Codec configuration box        : avcC

Audio
ID                             : 1
Format                         : AAC LC
Format/Info                    : Advanced Audio Codec Low Complexity
Codec ID                       : mp4a-40-2
Duration                       : 1 min 1 s
Source duration                : 1 min 2 s
Bit rate mode                  : Constant
Bit rate                       : 2 158 b/s
Nominal bit rate               : 128 kb/s
Channel(s)                     : 2 channels
Channel layout                 : L R
Sampling rate                  : 44.1 kHz
Frame rate                     : 43.066 FPS (1024 SPF)
Compression mode               : Lossy
Stream size                    : 16.3 KiB (0%)
Source stream size             : 16.3 KiB (0%)
Title                          : Core Media Audio

I'm not a big fan of editing on the iPhone (especially because I borrowed it from my wife), so I use the following "trick" to get this video on my desktop and compress it at the same time. I am using the Telegram engine to do this for me and share this video NOT as a file. This allows me to trim the video (remove unwanted last few seconds when I turn off recording) and set the following quality settings:

As you can see, you get either 9.1MB for 480p or 19.4MB for 720p for a one minute video. As you can see in section 4.1 for the video on device emulators I chose to use a width of just 396px, which seems about right for half the width of this blog if you're reading from a desktop, or it fits perfectly on most mobile phone screens. However, for this video, I chose to use 720p, which is 576 pixels wide.

Here is the metadata after converting via Telegram:

General

Format                         : MPEG-4
Format profile                 : Base Media / Version 2
Codec ID                       : mp42 (isom/mp41/mp42)
File size                      : 9.51 MiB
Duration                       : 59 s 200 ms
Overall bit rate               : 1 348 kb/s

Video
ID                             : 1
Format                         : AVC
Format/Info                    : Advanced Video Codec
Format profile                 : High@L3.1
Format settings                : CABAC / 2 Ref Frames
Format settings, CABAC         : Yes
Format settings, Reference fra : 2 frames
Codec ID                       : avc1
Codec ID/Info                  : Advanced Video Coding
Duration                       : 59 s 200 ms
Bit rate                       : 1 341 kb/s
Width                          : 576 pixels
Height                         : 1 280 pixels
Display aspect ratio           : 0.450
Frame rate mode                : Variable
Frame rate                     : 26.250 FPS
Minimum frame rate             : 1.500 FPS
Maximum frame rate             : 30.000 FPS
Color space                    : YUV
Chroma subsampling             : 4:2:0
Bit depth                      : 8 bits
Scan type                      : Progressive
Bits/(Pixel*Frame)             : 0.069
Stream size                    : 9.46 MiB (100%)
Title                          : Core Media Video
Encoded date                   : UTC 2022-05-16 23:16:38
Tagged date                    : UTC 2022-05-16 23:16:46
Color range                    : Limited
Color primaries                : BT.709
Transfer characteristics       : BT.709
Matrix coefficients            : BT.709
Codec configuration box        : avcC

Audio
ID                             : 2
Format                         : AAC LC
Format/Info                    : Advanced Audio Codec Low Complexity
Codec ID                       : mp4a-40-2
Duration                       : 59 s 184 ms
Source duration                : 59 s 234 ms
Bit rate mode                  : Constant
Bit rate                       : 2 196 b/s
Nominal bit rate               : 64.0 kb/s
Channel(s)                     : 2 channels
Channel layout                 : L R
Sampling rate                  : 44.1 kHz
Frame rate                     : 43.066 FPS (1024 SPF)
Compression mode               : Lossy
Stream size                    : 15.9 KiB (0%)
Source stream size             : 15.9 KiB (0%)
Title                          : Core Media Audio

Note that the aspect ratio has changed to 0.450 from 0.461 and it is of course still different from 0.561 for all other mobile cases when we recorded from the device emulator. However, note that the promised 19.4 MB turned out to be only 9.5 MB!

That resulting video will be used as .mp4 for the web, so I only have to upload and no more hassle as I mentioned before. And this is how you convert it to .webm on your server after uploading:

# ffmpeg -i iSocket-IoT-Portal-install-app-on-iPhone.mp4 -r 24 iSocket-IoT-Portal-install-app-on-iPhone.mp4.webm

This is the metadata for the converted .webm:

General
Format                         : WebM
Format version                 : Version 4
File size                      : 1.95 MiB
Duration                       : 59 s 257 ms
Overall bit rate               : 277 kb/s
Writing application            : Lavf58.76.100
Writing library                : Lavf58.76.100

Video
ID                             : 1
Format                         : VP9
Codec ID                       : V_VP9
Duration                       : 59 s 257 ms
Width                          : 576 pixels
Height                         : 1 280 pixels
Display aspect ratio           : 0.450
Frame rate mode                : Constant
Frame rate                     : 24.000 FPS
Color space                    : YUV
Title                          : Core Media Video
Writing library                : Lavc58.134.100 libvpx-vp9
Default                        : Yes
Forced                         : No
Color range                    : Limited
Color primaries                : BT.709
Transfer characteristics       : BT.709
Matrix coefficients            : BT.709
VENDOR_ID                      : [0][0][0][0]

Audio
ID                             : 2
Format                         : Opus
Codec ID                       : A_OPUS
Duration                       : 59 s 194 ms
Channel(s)                     : 2 channels
Channel layout                 : L R
Sampling rate                  : 48.0 kHz
Bit depth                      : 32 bits
Compression mode               : Lossy
Title                          : Core Media Audio
Writing library                : Lavc58.134.100 libopus
Default                        : Yes
Forced                         : No
VENDOR_ID                      : [0][0][0][0]

So you get only 1.95 MB for 1 minute .webm video converted from the “original” 9.5 MB .mp4 (actually from the original 52.2M, but honor doesn't go to .webm here, since it was re-converted to .mp4 on the way to .webm).

Because we have a much better converted .webm video size, we want browsers to try .webm first (compare with the defaults we chose for the videos captured from the emulators above). You'll be surprised that Safari on MacOS will also pick up this .webm and play it, but not on the iPhone - they don't seem to care about data usage on the iPhone. ;) For iPhone, .mp4 will be picked up, and .webm will be skipped.

webmmp4:

(DEFAULT for video recorded by iPhone) webm→mp4, no preload, with poster

<video controls="controls" preload="none" poster="/media/video/iSocket-IoT-Portal-install-app-on-iPhone.jpg">
    <source src="/media/video/iSocket-IoT-Portal-install-app-on-iPhone.webm" type="video/webm">
    <source src="/media/video/iSocket-IoT-Portal-install-app-on-iPhone.mp4" type="video/mp4">
</video>

mp4webm:

mp4→webm, no preload, with poster

<video controls="controls" preload="none" poster="/media/video/iSocket-IoT-Portal-install-app-on-iPhone.jpg">
    <source src="/media/video/iSocket-IoT-Portal-install-app-on-iPhone.mp4" type="video/mp4">
     <source src="/media/video/iSocket-IoT-Portal-install-app-on-iPhone.webm" type="video/webm">
</video>

Note on CSS and aspect ratio

Remember I promised to come back to this? We draw a frame for the video with CSS and you can see that we have reserved 396px and set the aspect ratio to 0.561 according to the video recorded on the device emulators. However, the aspect ratio and video width are different on iPhone. Do you see a problem? Well, you can see that the video doesn't quite fit the frame (you have these paddings on both sides), but is that bothering you a lot? Me don't. In fact, it's even better if we reduce the height of the video in this way, otherwise it may be awkward to watch on some phones. The most important thing is that our video maintains the correct proportions. Of course, we can always create another class for videos with this aspect ratio, but…

4.4. Get the Answer, Which Format is Better?

“there is no best format, it all depends on your workflow”

Let's recap the sizes, as this is always the main concern.

2 minutes 396x706 pixels recorded on device emulators to .webm format: 12.1MB.
Converted to .mp4: 2.2MB.

1 minute 576x1280 pixels as got after Telegram's conversion, .mp4:  9.5MB.
Converted to .webm: 1.95MB.

As you can see, there is no best format, it all depends on your workflow. In fact, you can also convert .webm to .webm to get the best size.

4.5. Make a Poster or Get Dimensions

Examples available in this post. In fact, everything is simple for the poster:

// Extracted poster fist frame (Result: 55K jpg)
# ffmpeg -i demo-2m-desktop.webm -frames:v 1 demo-2m-desktop.jpg

// If you need some specific second
// # ffmpeg -ss 2.5 -i demo-2m-desktop.webm -frames:v 1 demo-2m-desktop.jpg

5. HTML5 VIDEO WITH SOUND EXAMPLES

You can see how these videos were recorded in the introduction to section 4.1.

mp4webm:

mp4→webm, no preload, with poster

<video controls="controls" preload="none" poster="/media/video/Power-on-off-to-NAS-power-consumption-demo-iSocket.jpg">
    <source src="/media/video/Power-on-off-to-NAS-power-consumption-demo-iSocket.mp4" type="video/mp4">
    <source src="/media/video/Power-on-off-to-NAS-power-consumption-demo-iSocket.webm" type="video/webm">
</video>

webmmp4:

webm→mp4, no preload, with poster

<video controls="controls" preload="none" poster="/media/video/Power-on-off-to-NAS-power-consumption-demo-iSocket.jpg">
    <source src="/media/video/Power-on-off-to-NAS-power-consumption-demo-iSocket.webm" type="video/webm">
    <source src="/media/video/Power-on-off-to-NAS-power-consumption-demo-iSocket.mp4" type="video/mp4">
</video>

Original video:

General
Format                         : WebM
Format version                 : Version 4
File size                      : 6.93 MiB
Writing application            : Chrome
Writing library                : Chrome
IsTruncated                    : Yes
Video
ID                             : 2
Format                         : VP8
Codec ID                       : V_VP8
Width                          : 396 pixels
Height                         : 706 pixels
Display aspect ratio           : 0.561
Frame rate mode                : Variable
Compression mode               : Lossy
Language                       : English
Default                        : Yes
Forced                         : No
Audio
ID                             : 1
Format                         : Opus
Codec ID                       : A_OPUS
Channel(s)                     : 2 channels
Channel layout                 : L R
Sampling rate                  : 48.0 kHz
Bit depth                      : 32 bits
Compression mode               : Lossy
Language                       : English
Default                        : Yes
Forced                         : No

Converted video:

# ffprobe -hide_banner Power-on-off-to-NAS-power-consumption-demo-iSocket.mp4
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'Power-on-off-to-NAS-power-consumption-demo-iSocket.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.76.100
  Duration: 00:01:28.42, start: 0.000000, bitrate: 244 kb/s
  Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt470bg/unknown/unknown), 396x706 [SAR 1:1 DAR 198:353], 110 kb/s, 24 fps, 24 tbr, 12288 tbn, 48 tbc (default)
    Metadata:
      handler_name    : VideoHandler
      vendor_id       : [0][0][0][0]
  Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
      vendor_id       : [0][0][0][0]
      
# ffprobe -i Power-on-off-to-NAS-power-consumption-demo-iSocket.mp4 -show_entries format=size -v quiet
[FORMAT]
size=2701116
[/FORMAT]
# ffprobe -i Power-on-off-to-NAS-power-consumption-demo-iSocket.mp4 -show_entries format=size -v quiet -of csv="p=0"
2701116
# ls -l -h Power-on-off-to-NAS-power-consumption-demo-iSocket.mp4 | awk '{print $5}'
2.6M

I post useful information on my blog and share my experience for free. I don't post links to Amazon or anything like that. If my articles educated you, or maybe even helped you earn or save money or find a job, you can buy me a coffee.

Posted (Last update )