时间戳

首页 > 解决方案 > SPFx 在 Web 部件上动态播放 HTML5 视频

reactjs - SPFx 在 Web 部件上动态播放 HTML5 视频

问题描述

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

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

  2. 这将在按钮单击时从 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 中完成，如果有人可以帮助我们，我将不胜感激。

如果需要任何其他详细信息，请告诉我

提前致谢。

标签： reactjstypescripthtml5-videosharepoint-onlinespfx

解决方案

@维维克，

因为它是一个 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();
  }

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

BR

推荐阅读