如何将MS Stream视频URL嵌入AngularJS应用的HTML页面？

嘿，我懂你现在的状况——代码没抛错，但视频就是没加载起来，问题根源其实不在load()本身，而是MS Stream的视频不能直接用普通<video>标签的src来加载！

为什么你的代码没生效？ #

MS Stream提供的视频URL（比如播放页链接）并不是直接的MP4媒体文件地址，它背后有DRM权限验证、播放逻辑封装，普通的<video>标签根本无法解析这个URL，自然触发不了loadeddata事件，load()看起来就像“没生效”一样。

正确的解决方案：用官方嵌入方式（IFrame） #

MS Stream推荐用IFrame来嵌入视频，这样能自动处理权限和播放逻辑，步骤如下：

1. 提取视频ID：从用户粘贴的MS Stream URL里取出视频唯一ID（URL结构一般是https://web.microsoftstream.com/video/[视频ID]）
2. 构造嵌入URL：用官方的嵌入格式生成可信任的资源地址
3. 在AngularJS中处理并渲染IFrame

修改后的JS代码

// 先写一个工具函数提取MS Stream视频ID
function getStreamVideoId(videoUrl) {
  // 匹配URL中的视频ID部分，适配常见的MS Stream链接格式
  const idMatch = videoUrl.match(/video\/([0-9a-fA-F-]{36})/);
  return idMatch ? idMatch[1] : null;
}

const streamVideoId = getStreamVideoId(videoUrl);
if (streamVideoId) {
  // 构造MS Stream官方嵌入URL，可调整autoplay等参数
  const embedUrl = `https://web.microsoftstream.com/embed/video/${streamVideoId}?autoplay=false`;
  // 必须用$sce信任这个资源URL，否则AngularJS会拦截
  scope.myContent.trustedEmbedUrl = $sce.trustAsResourceUrl(embedUrl);
  // 手动触发脏检查更新视图（避免$apply已在进行中的错误）
  if (!$scope.$$phase) {
    scope.$apply();
  }
} else {
  console.warn("请输入有效的MS Stream视频链接");
}

对应的HTML模板

<!-- 当有合法的嵌入URL时渲染IFrame -->
<iframe 
  ng-if="myContent.trustedEmbedUrl"
  ng-src="{{myContent.trustedEmbedUrl}}"
  width="640" 
  height="360" 
  frameborder="0" 
  allowfullscreen
></iframe>

额外注意事项 #

• 确保用户粘贴的是视频播放页的完整URL，而不是分享的短链接（如果是短链接，可能需要先做跳转解析拿到完整URL）
• $sce.trustAsResourceUrl是必须的，AngularJS的安全机制会阻止未被信任的外部资源加载
• 可以根据需求调整嵌入URL的参数，比如autoplay=true（自动播放）、showinfo=false（隐藏信息栏）等

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