Angular中如何为Flowplayer添加多画质视频源？

Flowplayer原生支持多视频源切换，你只需要把原来单个的src配置替换成sources数组，每个数组元素对应一个画质的视频源，并指定分辨率和显示标签即可。

修改后的完整代码 #

flowplayer('#my_player',
  {
    // 替换单个src为sources数组，配置不同画质
    sources: [
      { src: '../assets/videos/video_1080p.mp4', label: '1080p', resolution: 1080 },
      { src: '../assets/videos/video_720p.mp4', label: '720p', resolution: 720 },
      { src: '../assets/videos/video_480p.mp4', label: '480p', resolution: 480 }
    ],
    ima: {
      ads: [
        { time: 0, adTag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator='},
      ]
    },
  }
)

<div id="my_player"></div>

关键说明 #

• sources数组中每个对象的label是播放器菜单中显示的画质名称（比如"1080p"），resolution是对应视频的垂直分辨率数值，Flowplayer会根据这个数值自动排序画质选项
• 确保每个视频源的路径正确，且视频编码格式兼容主流浏览器（推荐H.264编码的MP4）
• 原有IMA广告配置无需改动，多画质功能和广告功能可以正常共存

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