SPFx 在 Web 部件上动态播放 HTML5 视频答案

【问题标题】：SPFx Play HTML5 Video dynamically on a webpartSPFx 在 Web 部件上动态播放 HTML5 视频
【发布时间】：2021-04-14 01:31:23
【问题描述】：

我们正在开发一个网络部件

有一个文本框，我们在其中提供视频 URL

这将在按钮单击时从 SharePoint 列表中获取视频 URL 并设置视频的 SRC 元素，下面是代码

function textFieldChanged(newValue: string){ 

let vidplay = document.getElementById('VidPlayer');
let source = document.createElement('source');
source.setAttribute('src', newValue);
vidplay.appendChild(source);
vidplay.load();
vidplay.play();

sp.web.currentUser.get().then((user: ISiteUserInfo) => {

  console.log("user", user);
  const userId: number = user.Id;

  sp.web.lists.getByTitle(videoList).
    items.select("ID", "User/ID", "VideoURL")
    .expand("User")
    .filter(`VideoURL eq '${decodeURIComponent(newValue)}' and User/ID eq '${userId}'`)
    .top(1)
    .get()
    .then((videos: IVideoEntry[]) => {
      console.log("Videos", videos);

      // Did we find a video?
      if (videos.length > 0) {
        //Update the record
        const video: IVideoEntry = videos[0];
        console.log("We found the video", video);

        alert(videoRef.current.currentTime);

      }
    });
});

}

视频播放器元素

<div>
      <video
        id="VidPlayer"
        ref={videoRef}
        style={{ width: elementWidth }}
        src={txtParam}
      //controls
      ></video>< br/>

      <TextField id="txtVideoURL" onChange={(ev,newValue)=> {txtParam=newValue}}/> 

      <DefaultButton text="Submit" onClick={()=>{textFieldChanged(txtParam)}}/>

</div>

阅读了很多与此相关的文章，但是无法使用加载视频元素然后播放所需的 .play() 和 .load() 。

不确定这需要如何在 SPFx 中完成，如果有人可以帮助我们，我们将不胜感激。

如果需要任何其他细节，请告诉我

提前致谢。

【问题讨论】：

标签： reactjs typescript html5-video sharepoint-online spfx

【解决方案1】：

@Vivek，

因为它是一个 React 项目，我建议你使用 ref 而不是 id。

private video_ref: React.RefObject<HTMLVideoElement>;
 constructor(props: IPlayerProps) {
    super(props);    
    this.videoRef= React.createRef();

  }

我们可以在textFieldChanged 方法中获取它的实例，如下所示：

private textFieldChanged(newValue: string) {
    let vidplay = this.videoRef.current;
    let source = document.createElement('source');
    source.setAttribute('src', newValue);
    vidplay.appendChild(source);
    vidplay.load();
    vidplay.play();
  }

您也可以使用其他 React 视频控件。

【讨论】：

感谢您的帮助 :) 我仍然面临一些问题，由于您是这里的热门成员之一，您介意将此对话移至聊天，因为在那里更容易解释吗？