Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add aes-decrypter to React JS webpage #82

Open
theathleticnerd opened this issue Dec 18, 2020 · 3 comments
Open

Add aes-decrypter to React JS webpage #82

theathleticnerd opened this issue Dec 18, 2020 · 3 comments

Comments

@theathleticnerd
Copy link

I need to aes decrypter to my file which is a webpage made using ReactJS. Please help.

@theathleticnerd
Copy link
Author

theathleticnerd commented Dec 18, 2020

This is my code:

import React, { useRef, useState, useEffect } from "react";
import videojs from "video.js";
require("videojs-hls-quality-selector");

export const VideoPlayer = (props) => {
  const videoPlayerRef = useRef(null); // Instead of ID
  const [currentTime, setCurrentTime] = useState(null);
  const videoSrc = "https://media.w3.org/2010/05/sintel/trailer_hd.mp4";

  const videoJSOptions = {
    autoplay: "muted",
    controls: true,
    userActions: { hotkeys: true },
    playbackRates: [0.5, 1, 1.5, 2],
    qualitySelector: true,
  };

  useEffect(() => {
    if (videoPlayerRef) {
      const player = videojs(videoPlayerRef.current, videoJSOptions, () => {
        player.src(videoSrc);

        player.hlsQualitySelector({
          displayCurrentQuality: true,
        });
        player.on("ended", () => {
          console.log("ended");
        });
        player.on("timeupdate", () => {
          setCurrentTime(player.currentTime());
        });
        console.log("Player Ready");
      });
    }

    return () => {};
  }, []);

  return (
    <div onContextMenu={(e) => e.preventDefault()} style={{ width: "100%" }}>
      <video
        style={{ width: "100%" }}
        ref={videoPlayerRef}
        className="video-js"
      />
      <span>Current Time: {currentTime}</span>
      {/* <GlobalStyle /> */}
    </div>
  );
};
@gkatsev
Copy link
Member

gkatsev commented Dec 21, 2020

You should be able to import aes-decrypter like any other modules. We have a quick usage in the README https://github.com/videojs/aes-decrypter#usage and while it uses require you should be able to use import instead and have it work more or less the same.

@luxeconsulting
Copy link

How aes-decrypter i need help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
3 participants