如何通过编程获取SharePoint Stream视频的嵌入源地址

要实现从SharePoint自动获取视频嵌入URL并在Angular中播放，可通过以下步骤完成：

1. 配置身份验证 #

使用Microsoft Authentication Library (MSAL) 为Angular应用配置身份验证，确保应用拥有访问SharePoint站点视频资源的权限（推荐Files.Read或Sites.Read.All权限）。需在Azure AD中注册应用，并添加对应Graph API权限。

2. 通过Microsoft Graph API获取嵌入URL #

SharePoint Stream的视频存储在站点的文档库中，可调用Graph API的DriveItem接口直接获取视频的embedUrl属性——该属性就是可直接作为iframe src的地址。

Angular服务示例代码 #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class StreamVideoService {
  private graphBaseUrl = 'https://graph.microsoft.com/v1.0';

  constructor(private http: HttpClient) {}

  // 获取指定视频的嵌入URL
  getVideoEmbedUrl(siteId: string, videoItemId: string, accessToken: string) {
    const authHeaders = new HttpHeaders().set('Authorization', `Bearer ${accessToken}`);
    // 仅请求embedUrl字段，减少响应数据量
    return this.http.get(`${this.graphBaseUrl}/sites/${siteId}/drive/items/${videoItemId}`, {
      headers: authHeaders,
      params: { select: 'embedUrl' }
    });
  }
}

3. 在组件中调用服务并渲染视频 #

在Angular组件中获取访问令牌，调用服务拿到嵌入URL后，绑定到iframe的src属性即可播放视频。

Angular组件示例代码 #

import { Component, OnInit } from '@angular/core';
import { StreamVideoService } from './stream-video.service';
import { MsalService } from '@azure/msal-angular';

@Component({
  template: `
    <div *ngIf="embedUrl; else loading">
      <iframe [src]="embedUrl" width="640" height="360" frameborder="0" allowfullscreen></iframe>
    </div>
    <ng-template #loading>
      <p>加载视频中...</p>
    </ng-template>
  `
})
export class VideoPlayerComponent implements OnInit {
  embedUrl?: string;

  constructor(
    private videoService: StreamVideoService,
    private msalService: MsalService
  ) {}

  ngOnInit(): void {
    const activeAccount = this.msalService.instance.getActiveAccount();
    if (!activeAccount) return;

    // 静默获取访问令牌
    this.msalService.instance.acquireTokenSilent({
      account: activeAccount,
      scopes: ['Files.Read']
    }).then(tokenResponse => {
      // 替换为你的站点ID和视频文件ID
      this.videoService.getVideoEmbedUrl('your-site-id', 'your-video-item-id', tokenResponse.accessToken)
        .subscribe(response => {
          this.embedUrl = response['embedUrl'];
        });
    });
  }
}

注意事项 #

• 确保Azure AD注册应用的权限已得到管理员同意（针对租户级应用）。
• 若视频存储在特定文档库中，也可通过/sites/{site-id}/lists/{list-id}/items/{item-id}/driveItem端点获取DriveItem资源。
• 直接使用Graph API返回的embedUrl可避免手动拼接URL带来的兼容性问题，该地址是官方支持的嵌入地址。

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