求助：适配不同分辨率加载对应视频的JavaScript实现问题

需求说明 #

需要根据浏览器分辨率加载对应规格的视频，规则如下：

• 桌面端：
  • 浏览器宽度小于1200px时，加载720p视频
  • 宽度在1200px（含）至1920px之间时，加载1080p视频
  • 宽度大于等于1920px时，加载4K视频
• 移动端：始终加载垂直720p视频

现有方案问题 #

已知CSS媒体查询无法直接用于video标签的资源选择，因此尝试了两种JavaScript方案：

• 第一种脚本可以实现需求，但视频路径硬编码在脚本内部，无法在多页面或不同视频编码场景下复用；
• 第二种脚本能够正确检测浏览器分辨率并选中对应的<source>标签，但实际运行时始终加载最低分辨率的视频，无法达到预期效果。

当前使用的视频标签代码 #

<video autoplay muted loop playsinline preload="auto" class="content_video">
    
    <source src="video_4K_av1.mp4" type="video/mp4">
    <source src="video_4K_hevc.mp4" type="video/mp4">
    <source src="video_4K_h264.mp4" type="video/mp4">
    
    <source src="video_1080_av1.mp4" type="video/mp4">
    <source src="video_1080_hevc.mp4" type="video/mp4">
    <source src="video_1080_h264.mp4" type="video/mp4">
    
    <source src="video_720_av1.mp4" type="video/mp4">
    <source src="video_720_hevc.mp4" type="video/mp4">
    <source src="video_720_h264.mp4" type="video/mp4">
    
    <source src="video_720_vertical_av1.mp4" type="video/mp4">
    <source src="video_720_vertical_hevc.mp4" type="video/mp4">
    <source src="video_720_vertical_h264.mp4" type="video/mp4">
    
</video>

求助内容 #

恳请帮忙分析第二种脚本的问题原因，或提供可复用的实现方案。

内容的提问来源于stack exchange，提问作者ramshtex