如何获取video元素内部嵌套的source元素的src属性？

• 原生JavaScript实现
  无需引入额外依赖，直接调用浏览器原生API即可获取，示例代码如下：

// 1. 获取当前页面首个video标签内所有source元素的src，返回数组
const video = document.querySelector('video');
const allSourceSrc = Array.from(video.querySelectorAll('source')).map(item => item.src);
// 针对你提供的HTML示例输出：["img/Film/vid.mp4", "img/Film/vid.mp4"]

// 2. 按视频格式筛选获取对应src，示例为取mp4格式的视频地址
const mp4Src = video.querySelector('source[type="video/mp4"]')?.src;
// 针对你提供的HTML示例输出："img/Film/vid.mp4"

• jQuery实现
  如果项目已经引入jQuery，可使用以下更简洁的写法：

// 1. 获取所有source的src数组
const allSourceSrc = $('video source').map(function() {
  return $(this).attr('src');
}).get();

// 2. 筛选mp4格式的src
const mp4Src = $('video source[type="video/mp4"]').attr('src');

注意：如果video元素是动态渲染到页面的，需要等元素挂载完成后再执行上述代码，否则会出现获取不到元素的报错。

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