Add two custom metrics for video using source elements with media queries

[scottjehl]

The first metric returns the number of video elements that have a source element using media. The second is an array of all video source media attribute values in play.

These metrics are meant to keep track of responsive video usage now that the features are standard and supported again.

---

Test websites:

• https://scottjehl.com/posts/using-responsive-video/
• https://scottjehl.com/sandbox/video-media/

[rviscomi]

@scottjehl could you add a few test websites to your first comment, matching the format in the PR template? The bot will run the custom metric changes against those sites and spit out the results so we can make sure that it works.

[scottjehl]

Sure thing @rviscomi , I added a couple links to the PR in that format

[github-actions]

Custom metrics for https://almanac.httparchive.org/en/2022/

WPT test run results: http://webpagetest.httparchive.org/results.php?test=240723_SM_4
Changed custom metrics values:

{
  "_media": {
    "num_picture_img": 0,
    "num_image_sizes": 0,
    "num_srcset_all": 0,
    "num_srcset_sizes": 0,
    "num_srcset_descriptor_x": 0,
    "num_srcset_descriptor_w": 0,
    "num_srcset_candidates": 0,
    "picture_formats": [],
    "num_video_nodes": 0,
    "video_durations": [],
    "video_attributes_values_counts": [],
    "video_display_style": [],
    "video_using_source_media_count": 0,
    "video_source_media_values": [],
    "video_source_format_count": [],
    "video_source_format_type": [],
    "num_picture_using_min_resolution": 0,
    "num_picture_using_orientation": 0,
    "num_img_not_in_picture_srcset_candidates": 0
  }
}

Custom metrics for https://scottjehl.com/posts/using-responsive-video

WPT test run results: http://webpagetest.httparchive.org/results.php?test=240723_CQ_5
Changed custom metrics values:

{
  "_media": {
    "num_picture_img": 0,
    "num_image_sizes": 0,
    "num_srcset_all": 0,
    "num_srcset_sizes": 0,
    "num_srcset_descriptor_x": 0,
    "num_srcset_descriptor_w": 0,
    "num_srcset_candidates": 0,
    "picture_formats": [],
    "num_video_nodes": 1,
    "video_durations": [
      8.872278
    ],
    "video_attributes_values_counts": [
      {
        "attribute": "controls",
        "value": "",
        "count": 1
      },
      {
        "attribute": "autoplay",
        "value": "",
        "count": 1
      },
      {
        "attribute": "loop",
        "value": "",
        "count": 1
      }
    ],
    "video_display_style": [
      "block"
    ],
    "video_using_source_media_count": 1,
    "video_source_media_values": [
      "(max-width: 599px)"
    ],
    "video_source_format_count": [
      2
    ],
    "video_source_format_type": [
      [
        null,
        null
      ]
    ],
    "num_picture_using_min_resolution": 0,
    "num_picture_using_orientation": 0,
    "num_img_not_in_picture_srcset_candidates": 0
  }
}

Custom metrics for https://scottjehl.com/sandbox/video-media

WPT test run results: http://webpagetest.httparchive.org/results.php?test=240723_0A_6
Changed custom metrics values:

{
  "_media": {
    "num_picture_img": 0,
    "num_image_sizes": 0,
    "num_srcset_all": 0,
    "num_srcset_sizes": 0,
    "num_srcset_descriptor_x": 0,
    "num_srcset_descriptor_w": 0,
    "num_srcset_candidates": 0,
    "picture_formats": [],
    "num_video_nodes": 1,
    "video_durations": [
      8.872278
    ],
    "video_attributes_values_counts": [
      {
        "attribute": "controls",
        "value": "",
        "count": 1
      },
      {
        "attribute": "autoplay",
        "value": "",
        "count": 1
      },
      {
        "attribute": "loop",
        "value": "",
        "count": 1
      }
    ],
    "video_display_style": [
      "inline"
    ],
    "video_using_source_media_count": 1,
    "video_source_media_values": [
      "(min-width: 600px)"
    ],
    "video_source_format_count": [
      2
    ],
    "video_source_format_type": [
      [
        "video/mp4",
        "video/mp4"
      ]
    ],
    "num_picture_using_min_resolution": 0,
    "num_picture_using_orientation": 0,
    "num_img_not_in_picture_srcset_candidates": 0
  }
}

[rviscomi]

Looks like it works!