React + VideoJS

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]

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 😃

[tap2k]

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