-
Notifications
You must be signed in to change notification settings - Fork 90
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
React + VideoJS #386
Comments
Hello @stormofe! 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 :) |
Thank you very much for your reply! I was really looking forward to this ;) |
Thanks for the answer. |
Well, it's gonna take a while. I have to finish what I'm working on right now. |
I tried using this example code exactly as written and the video does not take up the whole viewport. Am I doing something wrong? |
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:
I use it like
and have simple
Help me please. I have been working on this problem for several days. Nothing works
The text was updated successfully, but these errors were encountered: