如何在活动类HTML网站中通过URL播放YouTube/Facebook视频

咱们先理清楚核心需求：用户通过表单提交视频URL后，网站要能解析并嵌入对应平台的播放器，让访客直接在页面上播放视频。下面分步骤来落地实现：

第一步：解析视频ID（核心关键） #

直接用完整URL嵌入容易出问题，平台都提供了基于唯一视频ID的标准化嵌入方案，所以第一步要从用户输入的URL里提取ID：

提取YouTube视频ID #

YouTube常见的URL格式有这几种：

• https://www.youtube.com/watch?v=XXXXXX
• https://youtu.be/XXXXXX
• https://www.youtube.com/embed/XXXXXX

可以用正则表达式快速提取ID，前端JS示例：

function getYoutubeId(url) {
  const regex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
  const match = url.match(regex);
  return match ? match[1] : null;
}

提取Facebook视频ID #

Facebook视频的常见URL格式：

• https://www.facebook.com/XXXX/videos/YYYYY/
• https://www.facebook.com/watch/?v=YYYYY

对应的正则提取代码：

function getFacebookId(url) {
  const regex = /(?:facebook\.com\/.*\/videos\/|facebook\.com\/watch\?v=)([^\/?&]+)/;
  const match = url.match(regex);
  return match ? match[1] : null;
}

第二步：生成嵌入播放器代码 #

拿到视频ID后，就可以生成对应平台的嵌入代码了：

YouTube嵌入代码 #

用官方的自适应嵌入格式，适配不同屏幕：

<iframe width="100%" height="400" src="https://www.youtube.com/embed/[YOUTUBE_ID]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Facebook嵌入代码 #

Facebook需要先加载官方SDK，再渲染视频：
首先在页面头部引入SDK：

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0" nonce="YOUR_NONCE_VALUE"></script>

然后嵌入视频的代码：

<div class="fb-video" data-href="https://www.facebook.com/watch/?v=[FACEBOOK_ID]" data-width="auto" data-show-text="false">
  <blockquote cite="https://www.facebook.com/watch/?v=[FACEBOOK_ID]" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/watch/?v=[FACEBOOK_ID]">视频预览</a>
  </blockquote>
</div>

第三步：整合到你的网站流程 #

前端即时预览（可选体验优化） #

如果想让用户提交前就能看到视频预览，可以给表单加个预览区域，实时生成嵌入代码：

// 监听输入和选项变化
const urlInput = document.querySelector('input[name="txturl"]');
const radioOptions = document.querySelectorAll('input[name="vlinkop"]');
const previewArea = document.getElementById('video-preview');

function updatePreview() {
  const url = urlInput.value;
  const selectedPlatform = document.querySelector('input[name="vlinkop"]:checked')?.value;
  
  if (!url || !selectedPlatform) {
    previewArea.innerHTML = '';
    return;
  }

  let embedCode = '';
  if (selectedPlatform === 'utube') {
    const id = getYoutubeId(url);
    embedCode = id ? `<iframe width="100%" height="400" src="https://www.youtube.com/embed/${id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>` : '无效的YouTube链接';
  } else if (selectedPlatform === 'fvideo') {
    const id = getFacebookId(url);
    if (id) {
      embedCode = `<div class="fb-video" data-href="https://www.facebook.com/watch/?v=${id}" data-width="auto" data-show-text="false"><blockquote cite="https://www.facebook.com/watch/?v=${id}" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/watch/?v=${id}">视频预览</a></blockquote></div>`;
      // 强制重新解析Facebook组件
      if (window.FB) window.FB.XFBML.parse(previewArea);
    } else {
      embedCode = '无效的Facebook视频链接';
    }
  }

  previewArea.innerHTML = embedCode;
}

// 绑定事件
urlInput.addEventListener('input', updatePreview);
radioOptions.forEach(opt => opt.addEventListener('change', updatePreview));

记得在HTML里加预览区域：

<div id="video-preview" class="mt-3"></div>

后端存储与页面渲染 #

如果是提交到后端保存，建议你把平台类型+视频ID存在数据库里（别存完整URL，避免平台URL格式变动导致失效）。当页面需要展示视频时，根据存储的平台和ID，动态生成对应的嵌入代码即可。

注意事项 #

• 要做错误处理：比如用户输入的URL不符合平台格式，要给出明确提示
• 权限问题：只有公开的视频才能被嵌入播放，私有视频无法正常展示
• 响应式适配：设置iframe宽度为100%，保证在手机、平板上都能正常显示

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