React + VideoJS - Githubissues

stormofe commented 2 years ago

Description

How can I use React components along with VideoJS like in your example https://naver.github.io/egjs-view360/examples/panoviewer/etc/videojs.html ?

I have components:

export const useVideoJS = (videoJsOptions) => {
    const videoNode = useRef(null)
    const player = useRef(null)

    let changedKey = videoJsOptions.key;

    useEffect(() => {
        player.current = videojs(videoNode.current, videoJsOptions)

        return () => {
            player.current.dispose()
        }
    }, [changedKey])

    const Video = useCallback(
        ({ children, ...props }) => {
            return (
                <div data-vjs-player key={changedKey}>
                    <video ref={videoNode} className="video-js" {...props}>
                        {children}
                    </video>
                </div>
            )
        },
        [changedKey],
    )
    return { Video, player: player.current }
}

I use it like

import './App.css';
import { useVideoJS } from './hooks/useVideoJS';

import vid from './source/vid2.mp4'

function App() {

    const video = {
        url: vid,
        subtitlesUrl: vid
    }

    const { Video } = useVideoJS({
        sources: [{ src: video.url }],
        controls: true,
        playbackRates: [0.5, 1, 1.5, 2],
        responsive: true,
        key: 'VideoJS'
    })

    return (
        <div>
            <Video playsInline muted>
                <track
                    src={video.subtitlesUrl}
                    kind="subtitles"
                    srcLang="en"
                    label="English"
                />
            </Video>
        </div>
    );
}

export default App;

and have simple

<PanoViewer
        tag="div"
        id='viewer'
        video={video.src}
        projectionType={PROJECTION_TYPE.EQUIRECTANGULAR}
        useZoom={false}
        onViewChange={e => {}}
        onReady={e =>{}}
        showPolePoint={true}
    >
    </PanoViewer>

Help me please. I have been working on this problem for several days. Nothing works

WoodNeck commented 2 years ago

Hello @stormofe! Sorry for the long wait, I missed checking this issue by mistake. Here's the working demo:

import React from "react";
import videojs from "video.js";
import { PanoViewer } from "@egjs/react-view360";
import "video.js/dist/video-js.css";

export default class VideoJSDemo extends React.Component {
  private _panoViewer: PanoViewer;
  private _videoRef: HTMLVideoElement;

  public componentDidMount() {
    videojs(this._videoRef).ready(() => {
      this._videoRef.style.display = "none";
      this._panoViewer.setVideo(this._videoRef, {
        projectionType: "equirectangular",
      });
    });
  }

  public render() {
    return <div>
      <PanoViewer ref={ref => {
        ref && (this._panoViewer = ref);
      }} id="viewer" data-vjs-player>
        <video ref={ref => {
          ref && (this._videoRef = ref);
        }} className="video-js vjs-fluid vjs-default-skin vjs-big-play-centered vjs-controls-enabled" crossOrigin="anonymous" playsinline={true} controls loop
        style={{ width: "100%", height: "100%" }}>
          <source src="https://naver.github.io/egjs-view360/examples/panoviewer/etc/img/seven.mp4" type="video/mp4" />
          <source src="https://naver.github.io/egjs-view360/examples/panoviewer/etc/img/seven.webm" type="video/webm"></source>
        </video>
      </PanoViewer>
    </div>
  }
}

I promise to add this demo to the next version :)

stormofe commented 2 years ago

Thank you very much for your reply! I was really looking forward to this ;) Could you please tell me how can I use your development (PanoControls) in this project? Copy folder 'Common' from repo or install npm package egjs-view360 and use it from there?

WoodNeck commented 2 years ago

@stormofe It might be frustrating, but we don't package PanoControl inside @egjs/react-view360 But, like you said, you can copy-paste the source code and use that in your repository :)

You should copy all of those files:

You might have to copy those files too, if you're willing to use the VR

As those files are developed only for our demo, it might be quite burdensome to migrate them. I'll fix that on the new major version. Feel free to leave a comment here if there's some issue while migrating.

stormofe commented 2 years ago

Thanks for the answer. Hmm, this will be a laborious process. I'll try to do it myself. Can you please let me know when you plan to release the new major version?

WoodNeck commented 2 years ago

Well, it's gonna take a while. I have to finish what I'm working on right now. I think it would take at least 3 months or longer.

tap2k commented 1 year ago

I tried using this example code exactly as written and the video does not take up the whole viewport. Am I doing something wrong?

naver / egjs-view360

React + VideoJS #386

Description