如何在PowerPoint加载项中用Unsplash API（JavaScript）渲染视频？

步骤1：准备Unsplash API权限 #

• 在Unsplash开发者平台注册应用，获取专属Access Key
• 所有Unsplash视频API请求必须携带Authorization: Client-ID YOUR_ACCESS_KEY请求头

步骤2：修正API请求逻辑 #

你当前的VideoApi.getVideo封装可能存在问题，以下是基于fetch的标准实现：

// 替换为你的Unsplash Access Key
const UNSPLASH_ACCESS_KEY = "YOUR_ACCESS_KEY";

const getUnsplashVideo = async (target) => {
  try {
    let resp;
    // 区分传入的是视频ID还是直接的视频源URL
    if (target.startsWith("https")) {
      // 直接请求视频源
      resp = await fetch(target, {
        headers: { "Authorization": `Client-ID ${UNSPLASH_ACCESS_KEY}` }
      });
    } else {
      // 通过视频ID请求详情接口，获取视频源地址
      resp = await fetch(`https://api.unsplash.com/videos/${target}`, {
        headers: { "Authorization": `Client-ID ${UNSPLASH_ACCESS_KEY}` }
      });
    }

    if (!resp.ok) throw new Error(`请求失败: ${resp.status}`);
    return await resp.json();
  } catch (err) {
    console.error("获取视频数据失败:", err);
    throw err;
  }
};

步骤3：修正渲染与交互逻辑 #

你的按钮和video标签缺少关键的视频源绑定逻辑，以下是完整修正后的代码：

const btnClickVideo = async (videoIdOrUrl) => {
  console.log("视频按钮点击", videoIdOrUrl);
  try {
    const videoData = await getUnsplashVideo(videoIdOrUrl);
    // 从返回数据中提取高清视频源地址
    const videoSource = videoData.urls?.raw || videoData.urls?.full;
    
    // 绑定视频源到页面中的video元素
    const videoElement = document.querySelector("video");
    if (videoElement && videoSource) {
      videoElement.src = videoSource;
      videoElement.load();
    }
    console.log("视频数据:", videoData);
  } catch (err) {
    console.error("加载视频失败:", err);
  }
};

对应的HTML结构修正：

<button title="加载视频" type="button" onClick={() => btnClickVideo("YOUR_VIDEO_ID_OR_URL")}>
  加载视频
</button>
<video width="150" height="150" controls></video>

进阶：将视频插入PowerPoint幻灯片 #

如果需要将视频直接插入到当前幻灯片（而非仅在任务窗格显示），可使用Office JS的官方API：

// 插入视频到当前激活幻灯片的指定位置
await PowerPoint.run(async (context) => {
  const activeSlide = context.presentation.slides.getActiveSlide();
  // 参数依次为：视频URL、X坐标、Y坐标、宽度、高度
  activeSlide.shapes.addVideoFromUrl(videoSource, 100, 100, 300, 200);
  await context.sync();
});

注意事项 #

• Unsplash API有请求频率限制，避免短时间内大量调用
• PowerPoint加载项的任务窗格受跨域规则约束，Unsplash默认支持CORS，无需额外配置
• 确保传入的视频ID/URL符合Unsplash的格式要求

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