React + VideoJS

[stormofe]

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 :)

[stormofe]

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]

@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:

• https://github.com/naver/egjs-view360/blob/master/demo/common/js/PieView.js
• https://github.com/naver/egjs-view360/blob/master/demo/common/js/GyroTouchOptions.js
• https://github.com/naver/egjs-view360/blob/master/demo/common/js/screenfull.min.js
• https://github.com/naver/egjs-view360/blob/master/demo/common/js/PanoControls.js

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

• https://cdn.jsdelivr.net/npm/[email protected]/build/webxr-polyfill.min.js
• https://github.com/naver/egjs-view360/blob/master/demo/common/js/initXR.js

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]

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]

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]

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