js获取video的src

在JavaScript中获取<video>元素的src属性有多种方法，以下是几种常见的方法及其示例代码：

1. 使用 `getElementById`

如果你知道视频元素的id，可以使用document.getElementById来获取该元素，然后访问其src属性。

<!-- HTML -->
<video id="myVideo" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<!-- JavaScript -->
<script>
  const videoElement = document.getElementById('myVideo');
  const videoSrc = videoElement.src;
  console.log(videoSrc); // 输出: example.mp4
</script>

2. 使用 `querySelector`

如果视频元素没有唯一的id，或者你想使用其他选择器，可以使用document.querySelector。

<!-- HTML -->
<video class="videoPlayer" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<!-- JavaScript -->
<script>
  const videoElement = document.querySelector('.videoPlayer');
  const videoSrc = videoElement.querySelector('source').src;
  console.log(videoSrc); // 输出: example.mp4
</script>

3. 获取所有视频源

如果一个<video>元素中有多个<source>标签，你可以遍历它们来获取所有的src。

<!-- HTML -->
<video id="myVideo" controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<!-- JavaScript -->
<script>
  const videoElement = document.getElementById('myVideo');
  const sources = videoElement.querySelectorAll('source');
  
  sources.forEach(source => {
    console.log(source.src);
    // 输出:
    // example.mp4
    // example.webm
  });
</script>

4. 动态设置视频源

有时候你可能需要动态地设置视频的src，可以通过修改<source>标签的src属性来实现。

<!-- HTML -->
<video id="myVideo" controls></video>

<!-- JavaScript -->
<script>
  const videoElement = document.getElementById('myVideo');
  const source = document.createElement('source');
  source.src = 'new_example.mp4';
  source.type = 'video/mp4';
  videoElement.appendChild(source);
  
  // 加载新的视频源
  videoElement.load();
  videoElement.play();
</script>

注意事项

跨域问题：确保视频文件允许通过JavaScript访问，避免跨域限制导致无法获取src。
浏览器兼容性：大多数现代浏览器都支持上述方法，但在处理老旧浏览器时可能需要额外的兼容性处理。
安全性：避免在不信任的环境中暴露视频源，以防止潜在的安全风险。

应用场景

视频播放器控制：动态获取和设置视频源，实现播放列表功能。
内容管理系统（CMS）：在前端展示视频时，根据用户权限或其他条件动态加载不同的视频源。
数据分析：获取用户观看的视频源，用于统计和分析用户行为。

如果你在获取src时遇到问题，可能是由于以下原因：

元素未正确选择：确保选择器正确，能够匹配到目标<video>或<source>元素。
视频尚未加载：如果视频还在加载过程中，可能需要等待加载完成后再获取src。
跨域限制：如果视频文件来自不同的域，浏览器的同源策略可能会阻止访问src。

解决方法：

检查选择器：使用浏览器的开发者工具（如Chrome的DevTools）确认是否正确选择了目标元素。
等待加载完成：使用事件监听器，如videoElement.addEventListener('loadedmetadata', () => { ... })，确保在视频元数据加载完成后获取src。
处理跨域问题：确保服务器设置了正确的CORS头部，允许跨域访问。

希望以上内容能帮助你更好地理解和操作JavaScript中获取视频src的方法。如有进一步的问题，欢迎继续提问！