You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

81 lines
2.0 KiB

import React, { Component } from "react";
import ReactPlayer from "react-player";
import "./index.scss";
class VideoApp extends Component {
player = {};
state = {
video: {
src: `https://dnvn.ir/api/v1/file/${
this.props.fileId.indexOf(",")
? this.props.fileId.split(",")[0]
: this.props.fileId
}`,
poster: this.props.fileId.split(",")[1]
? `https://dnvn.ir/api/v1/file/${this.props.fileId.split(",")[1]}`
: null,
},
};
onPlayerReady(player) {
// console.log("Player is ready: ", player);
this.player = player;
}
onVideoPlay(duration) {
// console.log("Video played at: ", duration);
}
onVideoPause(duration) {
// console.log("Video paused at: ", duration);
}
onVideoTimeUpdate(duration) {
// console.log("Time updated: ", duration);
}
onVideoSeeking(duration) {
// console.log("Video seeking: ", duration);
}
onVideoSeeked(from, to) {
// console.log(`Video seeked from ${from} to ${to}`);
}
onVideoEnd() {
// console.log("Video ended");
}
render() {
console.log(this.state.video.poster);
return (
// <div style={{ width: "100%", height: "100%" }}>
<ReactPlayer
style={{ backgroundImage: `url(${this.state.video.poster})` }}
height="100%"
width={"100%"}
type="video/mp4"
autoplay={true}
url={this.state.video.src}
controls
playing
light
config={{
file: {
attributes: {
poster: this.state.video.poster,
disablePictureInPicture: true,
controlsList:
window.location.host.indexOf("app") > -1
? "nodownload nofullscreen noremoteplayback noplaybackrate"
: "nodownload noremoteplayback noplaybackrate",
},
},
}}
// controlsList="nofullscreen"
/>
// </div>
);
}
}
export default VideoApp;