如何在 React js 中使用 VdoCipher

Question

How to fetch videos from VdoCipher and display then on my React js WebApp?

I am currently trying to use VdoCipher to store videos (I will upload them manually on the website) and then display them on my react webapp... infortuntly the documentation isn't very clear for me.

Answer 1

Here is some sample code to implement this

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 link for working version

Since there is a javascript src to be loaded, it checks in componentDidMount for the presence of global variable. You can choose to use this by alternative means such as scriptjs or adding script tag the index.html template.

The return of the new VdoPlayer() is supposed to be the reference of player that you need to call javascript APIs on player. If needed, you can make it available to the outside components with a callback prop. And then call this callback prop after the new VdoPlayer()