如何在 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