如何在 React js 中使用 VdoCipher

Question

如何从 VdoCipher 获取视频并显示在我的 React js WebApp 上？

我目前正在尝试使用 VdoCipher 来存储视频（我将在网站上手动上传它们），然后将它们显示在我的 React webapp 上……不幸的是，文档对我来说不是很清楚。

Answer 1

这是一些示例代码来实现这个

import React, { Component } from "react";
import "./style.css";

class VideoPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videoObject: null
    };
  }

  componentDidMount() {
    if (window.VdoPlayer) {
      return this.loadPlayer();
    }
    const playerScript = document.createElement("script");
    playerScript.src =
      "https://player.vdocipher.com/playerAssets/1.6.10/vdo.js";
    document.body.appendChild(playerScript);
    playerScript.addEventListener("load", () => {
      return this.loadPlayer();
    });
  }

  loadPlayer() {
    window.playerContainer = this.refs.container;
    new window.VdoPlayer({
      otp: this.props.otp,
      playbackInfo: this.props.playbackInfo,
      theme: "9ae8bbe8dd964ddc9bdb932cca1cb59a",
      container: this.refs.container
    });
  }

  render() {
    return <div className="player" ref="container"></div>;
  }
}

export default VideoPlayer;

工作版本的 Codesandbox 链接

由于要加载 javascript src，因此它会检查 componentDidMount 是否存在全局变量。 您可以选择通过其他方式使用它，例如scriptjs或在 index.html 模板中添加脚本标签。

new VdoPlayer()的返回应该是播放器的引用，您需要在播放器上调用 javascript API。 如果需要，您可以使用回调 prop 使其对外部组件可用。 然后在new VdoPlayer()之后调用这个回调 prop