如何从外部URL获取信息并提取视频链接？

看起来你在做一个简易的HTML5视频播放器，核心需求是从Dropbox目录链接里提取视频URL，实现自动续播和选片功能。这里有几个关键问题需要解决，我来一步步帮你梳理：

1. 先解决跨域获取Dropbox目录内容的问题 #

浏览器的同源策略会阻止你直接从前端请求Dropbox的页面（因为你的页面和Dropbox域名不同），所以有两种可行方案：

方案A：搭建简单的服务器端代理 #

你需要一个后端服务帮你请求Dropbox的目录页面，再把内容返回给前端。这里给你一个Node.js的极简示例（需要先安装express和axios）：

// server.js
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/get-dropbox-list', async (req, res) => {
  try {
    const listLink = "https://www.dropbox.com/sh/di8i7gob9b3mgle/AACOC5yDuBpttC2ZVYuxLJw5a?dl=0";
    const response = await axios.get(listLink);
    res.send(response.data); // 返回Dropbox目录的HTML内容
  } catch (error) {
    res.status(500).send('Failed to fetch Dropbox list');
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

启动这个服务器后，前端就可以请求http://localhost:3000/get-dropbox-list来获取Dropbox目录的HTML了。

方案B：使用Dropbox官方API（更可靠） #

如果能注册Dropbox开发者账号，用API直接获取文件列表会比解析HTML更稳定（因为Dropbox页面结构可能随时变化）。你可以用Dropbox的files/list_folder接口来获取指定目录下的所有视频文件，然后生成可播放的URL（把分享链接的dl=0改成dl=1就能直接播放）。

2. 从HTML中提取视频URL #

拿到Dropbox目录的HTML后，用DOMParser解析并筛选出所有.mp4链接：

async function fetchVideoUrls() {
  try {
    // 请求代理服务器获取Dropbox目录HTML
    const response = await fetch('http://localhost:3000/get-dropbox-list');
    const html = await response.text();
    
    // 解析HTML
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    
    // 筛选所有.mp4链接（Dropbox目录里的视频链接通常在a标签里）
    const videoLinks = Array.from(doc.querySelectorAll('a[href*=".mp4"]')).map(link => {
      // 把Dropbox的预览链接转成直接播放链接（dl=0改dl=1）
      return link.href.replace('dl=0', 'dl=1');
    });
    
    return videoLinks;
  } catch (error) {
    console.error('Failed to fetch video URLs:', error);
    return [];
  }
}

3. 实现播放列表核心功能（自动续播+选片按钮） #

首先建议把embed标签换成HTML5的video标签，它提供了更完善的事件监听和控制能力：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SU Video Player</title>
</head>
<body>
  <!-- 替换embed为video标签 -->
  <video id="videoPlayer" controls width="800">
    <source src="" type="video/mp4">
  </video>
  <!-- 选片按钮容器 -->
  <div id="playlistButtons"></div>

  <script>
    const videoPlayer = document.getElementById('videoPlayer');
    const playlistButtons = document.getElementById('playlistButtons');
    let videoUrls = [];
    let currentIndex = 0;

    // 初始化：获取视频列表并渲染按钮
    async function initPlaylist() {
      videoUrls = await fetchVideoUrls();
      if (videoUrls.length === 0) return;
      
      // 渲染选片按钮
      videoUrls.forEach((url, index) => {
        const button = document.createElement('button');
        button.textContent = `视频 ${index + 1}`;
        button.addEventListener('click', () => playVideo(index));
        playlistButtons.appendChild(button);
      });
      
      // 播放第一个视频
      playVideo(0);
    }

    // 播放指定索引的视频
    function playVideo(index) {
      currentIndex = index;
      videoPlayer.src = videoUrls[index];
      videoPlayer.play();
    }

    // 监听视频结束事件，自动播放下一个
    videoPlayer.addEventListener('ended', () => {
      if (currentIndex < videoUrls.length - 1) {
        playVideo(currentIndex + 1);
      } else {
        // 可选：播放完最后一个后回到第一个
        playVideo(0);
      }
    });

    // 初始化播放列表
    initPlaylist();
  </script>
</body>
</html>

关键注意点 #

• Dropbox链接转换：Dropbox的分享链接默认是预览页（dl=0），必须改成dl=1才能让video标签直接加载播放。
• 跨域问题：如果没有服务器，也可以用一些在线代理工具（但不推荐用于生产环境，稳定性和安全性没保障）。
• 视频格式兼容性：确保所有视频都是MP4格式（H.264编码），这样大多数浏览器都能支持。

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