HTML中本地上传的视频是否可生成独立的可分享链接？

方案1：纯静态前端实现（无后端，适合新手快速落地） #

不需要额外搭建后端服务，仅靠前端JS就能实现，成本最低：

• 核心逻辑：利用URL哈希（#后的参数）传递视频ID，页面加载时读取哈希值匹配对应视频资源加载
• 操作步骤：
  1. 给所有剪辑分配唯一的纯英文/数字ID，比如2024年5月的LOL五杀剪辑可设为lol-penta-202405
  2. 提前维护好ID和本地视频路径的映射表
  3. 页面加载时读取window.location.hash，匹配到对应视频后直接替换播放器的资源地址
• 核心代码示例：

  // 视频ID与资源路径的映射表，新增视频直接在这里加条目即可
  const videoMap = {
    'lol-penta-202405': 'videos/lol-202405-penta.mp4',
    'csgo-ace-202406': 'videos/csgo-202406-ace.mp4'
  }
  
  window.addEventListener('load', () => {
    const targetVideoId = window.location.hash.slice(1)
    const videoPlayer = document.querySelector('#video-player')
    const videoList = document.querySelector('#video-list')
  
    if (targetVideoId && videoMap[targetVideoId]) {
      // 匹配到对应视频，直接加载播放
      videoPlayer.src = videoMap[targetVideoId]
      videoPlayer.style.display = 'block'
      videoList.style.display = 'none'
      document.title = `剪辑分享：${targetVideoId}`
    } else {
      // 无匹配ID，显示首页视频列表
      videoPlayer.style.display = 'none'
      videoList.style.display = 'block'
    }
  })
  

• 分享链接格式：你的站点域名/#lol-penta-202405，用户点开即可直接播放对应视频

方案2：前端路由实现（适合单页应用，链接更简洁） #

如果你用Vue、React等框架搭建站点，可以用前端路由实现无哈希的干净链接，格式为你的站点域名/video/lol-penta-202405

• 注意事项：部署时需要配置服务器重定向规则，避免用户直接访问子路径返回404，Nginx配置示例如下：

  server {
    # 其余配置保持不变
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

方案3：带后端实现（适合视频量大、后续需要扩展功能的场景） #

如果后续需要加播放量统计、评论、批量上传等功能，可以搭建后端服务：

• 前端访问/video?id=xxx或者/video/xxx路径时，请求后端接口获取对应视频的元信息与播放地址
• 后端可以用Node.js、Python等任意你熟悉的语言实现，数据存在本地JSON文件或者数据库中都可

注意事项 #

• 视频ID尽量只用英文、数字和短横线，避免使用中文或特殊字符，防止不同设备解析乱码
• 单文件大于1G的剪辑建议做HLS切片处理，提升加载速度，小体积剪辑直接嵌入mp4即可

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