如何在Blogger的iframe中切换VidStream/RapidVideo视频源

没问题，我经常帮人处理Blogger的自定义播放器需求，这个需求其实很简单，核心就是通过JavaScript动态修改iframe的视频源地址。下面是完整的实现代码，你直接复制到Blogger文章的HTML视图里就能用，记得替换成你自己的视频链接：

<div class="video-player-container">
  <!-- 视频播放器iframe，默认加载VidStream源 -->
  <iframe id="videoPlayer" 
          src="YOUR_VIDSTREAM_URL" 
          width="100%" 
          height="480" 
          frameborder="0" 
          allowfullscreen
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
  </iframe>

  <!-- 视频源切换下拉框 -->
  <div style="margin-top: 10px;">
    <label for="sourceSelector">选择视频源：</label>
    <select id="sourceSelector" onchange="switchVideoSource(this.value)">
      <option value="YOUR_VIDSTREAM_URL" selected>VidStream</option>
      <option value="YOUR_RAPIDVIDEO_URL">RapidVideo</option>
    </select>
  </div>
</div>

<script>
function switchVideoSource(sourceUrl) {
  // 获取播放器iframe元素
  const player = document.getElementById('videoPlayer');
  // 切换视频源
  player.src = sourceUrl;
  // 可选：强制刷新播放器（某些情况下可能需要）
  player.contentWindow.location.reload();
}
</script>

代码说明： #

• iframe部分：默认指定VidStream的链接作为初始播放源，设置了allowfullscreen和必要的权限属性，保证视频能正常全屏播放；宽高设为100%和固定高度，适配Blogger的文章布局。
• 下拉选择框：默认选中VidStream选项，用户切换时会触发switchVideoSource函数，把选中的视频源地址传给函数。
• JavaScript函数：通过ID获取iframe元素，直接修改它的src属性来切换视频源；最后一行的刷新操作是可选的，某些视频平台可能需要强制刷新才能加载新源，你可以根据实际情况决定是否保留。

注意事项： #

1. 一定要把代码中的YOUR_VIDSTREAM_URL和YOUR_RAPIDVIDEO_URL替换成你实际从两个平台拿到的嵌入链接（不是视频的直接播放链接，要找平台提供的iframe嵌入代码里的src值）。
2. 如果你的Blogger模板有自定义CSS，可以给.video-player-container类添加样式，比如调整间距、添加边框等，让播放器更贴合你的博客风格。
3. 测试的时候注意检查两个视频源是否都能正常加载，个别平台可能会有嵌入限制，如果遇到加载失败的情况，确认一下平台的嵌入规则是否允许在Blogger中使用。

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