Any idea how i can create a Background Video (100vh, 100vw) using cloudinary-react?
Here is my Video Component:
import { useRef } from 'react'
import { Video, CloudinaryContext, Transformation } from 'cloudinary-react'
const VideoPlayer = () => {
const videoRef = useRef()
return (
<CloudinaryContext cloud_name="joinshelf">
<div className="h-screen w-screen">
<Video publicId="luciana_e1vp7u" innerRef={videoRef}>
<Transformation
audioCodec="none"
height="480"
quality="auto"
videoCodec="auto"
width="852"
crop="fill"
/>
</Video>
</div>
</CloudinaryContext>
)
}
export default VideoPlayer
If that not possible, any idea how to render a 11MB Video fast?
Right now it just a file in the public folder and im using Vercel for hosting
Thanks for the Helpers!
Related
I tried this .. in my react js to let my browser speak but it is not working on my chrome
import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';
function App() {
useEffect(() => {
let utterance = new SpeechSynthesisUtterance("Hello Wrold! Ready to Navigate!");
speechSynthesis.speak(utterance);
}, [])
return (
<div className="App">
<header className="App-header">
</header>
</div>
);
}
export default App;
is there a way i can just play without a button
I am trying to display a background video on my web app after fetching it from firebase storage. The code looks something like this:
import React, { useState, useEffect } from "react";
import { storage } from "../firebase";
const videoRef = storage.ref().child('<filename>');
export default function Dashboard() {
const [videoURL, setVideoUrl] = useState('');
useEffect(() => {
videoRef.getDownloadURL().then((url) => {
setVideoUrl(url);
});
}, []);
return (
<div>
<video width="400" autoPlay muted loop>
<source src={videoURL} type="video/mp4"/>
Your Browser does not support HTML video.
</video>
</div>
);
}
The resulting page is blank, but inspecting the element via dev tools shows the video element with the correct url. In fact, if I just copy the url and hard code it as src it works just fine.
I assume there is some issue related to React not refreshing after updating the url but I haven't found a solution so far.
You need to render <video> tag when the videoURL is available.
return (
<div>
{!!videoURL && (
<video width="400" autoPlay muted loop>
<source src={videoURL} type="video/mp4"/>
Your Browser does not support HTML video.
</video>
)}
</div>
);
You should try to use a component to do that.
i found react-player very easy to use.
https://www.npmjs.com/package/react-player
example of usage:
import React from 'react'
import ReactPlayer from 'react-player'
// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
Try adding the videoRef inside the dependency array on the useEffect.
I am working on a project that uploads images to Heroku with their new react-simple-file-upload addon. After uploading the file, a URL is provided for the image saved in the DB. I managed to display one of the images, but now I would like to display multiple-- essentially create a simple gallery. I am thinking i'll have to make a function that uses useState and an array, but am not really sure how to design it beyond that. Here is my working code:
import React from "react";
import SimpleFileUpload, { SimpleFileUploadProvider } from "../components/SimpleFileUpload"
import { useState } from 'react'
import "./styles.css"
const API_KEY = '...'
export default function About() {
const [files, setFiles] = useState();
console.log(files)
return (
<div className="App">
<h1>upload an image</h1>
<SimpleFileUpload apiKey={API_KEY} onSuccess={setFiles} />
{files && (
<div>
<img className="photo" src={files} witdh="50" hight="50" alt="huh?"/>
<div className="gallery">
</div>
</div>
)}
</div>
);
}
Any tips or tricks is greatly appreciated
I have the following component:
In this component, there is an image.
When I load the page, I realize the page will be loaded first then the image will be loaded later. How can I suspense the whole page before the image is loaded?
I have tried to wrap the whole div (id="container") in a Suspense component with a fallback method but it doesn't seem to work on images, and only on components.
How can I suspense the whole component before the image inside is loaded?
import React from "react";
import resume from "../assets/Joe_Rogan_Resume.jpg";
import Banner from "./Banner";
const Resume = () => (
<div id="container">
<Banner styleclass="ResumePageBanner" h1text="My Resume" />
<div className="resumePage">
<div id="resume">
<img src={resume} alt="Resume" />
</div>
</div>
</div>
);
export default Resume;
The Suspense component in React 16.x only lets you wait for some code to load, not any type of data (including images). Suspense for data fetching is still experimental. So you need to handle it manually if you don't want to use an unstable version.
import React from "react";
import resume from "../assets/Joe_Rogan_Resume.jpg";
import Banner from "./Banner";
const Resume = () => {
const [isImageLoaded, setIsImageLoaded] = React.useState(false);
React.useEffect(() => {
const image = new Image();
image.onload = () => setIsImageLoaded(true);
image.src = resume;
return () => {
image.onload = null;
};
}, []);
if (!isImageLoaded) {
return null;
}
return (
<div id="container">
<Banner styleclass="ResumePageBanner" h1text="My Resume" />
<div className="resumePage">
<div id="resume">
<img src={resume} alt="Resume" />
</div>
</div>
</div>
);
}
export default Resume;
I'm still new to React and after I finished the tutorial I wanted to create something myself.
I've passed the url to make a backgroundImage style and add borders to try it out. Unfortunately I can see the img being set in the css but it won't actually display as expected.
As a test I also tried a simple img with src attribute set to my image and nothing would display.
I made a folder called img inside the src
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Home/>
</div>
);
}
}
function Portfolio(props) {
const stylee = {
backgroundImage:'url('+props.imgURL+')',
borderWidth: 1,
};
const ide = 'portfolio'+props.counting;
return (<div id={ide} style={stylee} className='portfolio'/>)
}
class Home extends Component {
renderPortfolio(count,img){
return <Portfolio counting={count} imgURL={img}/>
}
render(){
return(
<div>
{this.renderPortfolio(1,'./img/1.jpeg')}
{this.renderPortfolio(2,'./img/2.jpeg')}
{this.renderPortfolio(3,'./img/1.jpeg')}
<img src='./img/1.jpeg'/>
</div>
)
}
}
export default App;
What am I doing wrong that is preventing the images from displaying ?
edit-- I've changed my code to the working solution
Instead of passing the local img url, I used require() first then pass the image to props.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Home/>
</div>
);
}
}
function Portfolio(props) {
const counter = 'portfolio'+props.counting;
const loadGambar = props.gmbr;
// const loadGambar2 = require(props.gmbr);
const stylee = {
borderColor:props.color,
border:1,
borderWidth: 10,
backgroundImage: "url("+loadGambar+")",
}
return(
<div id={counter} className='portfolio' style={stylee}>
</div>
)
}
class Home extends Component {
renderPortfolio(count,gambare){
return <Portfolio counting={count} gmbr={gambare}/>
}
render(){
return(
<div>
{this.renderPortfolio(1,require('./img/1.jpg))}
{this.renderPortfolio(2,require('./img/1.jpg'))}
{this.renderPortfolio(3,require('./img/2.jpg'))}
</div>
)
}
}
export default App;
Here's a link to a working example based on your code: sandbox link.
The problem with setting a background image is that it adapts to the dimensions of the div. In your case your div is empty in Portfolio so its dimensions are 0x0 and the image won't show. You will see from the link that I update the style and everything shows. Now the only issue you might have is that you don't have an image loader in your webpack configuration, if you are starting with react I would recommend create-react-app.