I'm using NextJS and I was trying to put a video as a background. In the FIRST render everything works fine, but when I reload the screen, the video doesn't run in the autoplay mode.
Code:
import React from 'react'
import MainHeader from '../components/MainHeader'
import { Container } from '../styles/pages/Home'
const Home: React.FC = () => {
return (
<Container>
<MainHeader />
<video autoPlay style={{ width: '500px', height: '500px' }}>
<source src="/blue.mp4" />
</video>
</Container>
)
}
export default Home
How can I fix that?
I have added the loop to your code. I hope it solves your problem
import React from 'react'
import MainHeader from '../components/MainHeader'
import { Container } from '../styles/pages/Home'
const Home: React.FC = () => {
return (
<Container>
<MainHeader />
<video autoPlay loop style={{ width: '500px', height: '500px' }}>
<source src="/blue.mp4" />
</video>
</Container>
)
}
export default Home
Just for information, the video with sound can't reload even with loop and autoplay, the browser don't allowed.
The solution is put autoplay, loop, muted and controls for could you start the sound if you want.
Related
I have a small app with react where I used hero-slider for the image slider. it shows the result as slider and background color. but the images are not shown.
here is my basicslider.js
import React from "react";
// JSX
import HeroSlider, { Slide, Nav } from "hero-slider";
// Images
const bogliasco = "https://i.imgur.com/Gu5Cznz.jpg";
const countyClare = "https://i.imgur.com/idjXzVQ.jpg";
const craterRock = "https://i.imgur.com/8DYumaY.jpg";
const giauPass = "https://i.imgur.com/8IuucQZ.jpg";
const BasicSlider = () => {
return (
<HeroSlider
slidingAnimation="left_to_right"
orientation="horizontal"
initialSlide={1}
onBeforeChange={(previousSlide, nextSlide) =>
console.log("onBeforeChange", previousSlide, nextSlide)
}
onChange={nextSlide => console.log("onChange", nextSlide)}
onAfterChange={nextSlide => console.log("onAfterChange", nextSlide)}
style={{
backgroundColor: "rgba(0, 0, 0, 0.33)"
}}
settings={{
slidingDuration: 250,
slidingDelay: 100,
shouldAutoplay: true,
shouldDisplayButtons: true,
autoplayDuration: 5000,
height: "100vh"
}}
>
<Slide
background={{
backgroundImage: giauPass,
backgroundAttachment: "fixed"
}}
/>
<Slide
background={{
backgroundImage: bogliasco,
backgroundAttachment: "fixed"
}}
/>
<Slide
background={{
backgroundImage: countyClare,
backgroundAttachment: "fixed"
}}
/>
<Slide
background={{
backgroundImage: craterRock,
backgroundAttachment: "fixed"
}}
/>
<Nav />
</HeroSlider>
);
};
export default BasicSlider;
Here is app.js
import React from 'react'
import './app.css'
import BasicSlider from './containers/basicslider/BasicSlider';
const App = () => {
return (
<div className='App'>
<BasicSlider/>
</div>
)
}
export default App
Here is my index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
Everything is fine. No error. No warning. Just it shows like this
enter image description here
I want to make the images visible. How can I solve it?
You cannot add component as backgroundImage, the correct way:
<Slide
background={{
backgroundImageSrc: bogliasco,
backgroundAttachment: "fixed"
}}
/>
i'm currently working on a project using stitches with cra but i've stuck to a problem with css props.
here's my code
Texts/index.tsx
import React from 'react';
import { TextStyle } from './textStyle';
const Texts = ({ text, css }: PropsType) => {
console.log(css);
return (
<>
<TextStyle css={{ ...css }} >
<>{text}</>
</TextStyle>
</>
);
};
export default Texts;
and this index.tsx is exported to another components
Container/index.tsx
import { styled, css } from '../../../stitches.config';
// atoms
import Texts from 'src/components/atoms/texts';
const PageContainer = () => {
return (
<Container>
<Contents >
<div>
<Texts
css={{ color: 'red' }}
/>
<Texts
css={{ paddingTop: '20px' }}
/>
</div>
</Contents>
</Container>
);
};
export default PageContainer;
as you can see with the above code, contains css as its child but css is never rendered at all
can anyone help me with this issue?
FYI, console.log(css); returned undefined to me.
Thank you in advance!
import { SafeAreaView, ScrollView, StyleSheet, View, Text } from 'react-native';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { Container, Content, List, ListItem } from 'native-base';
import Video from 'react-native-video';
function VideoListScreen({ navigation }) {
return (
<Container>
<Content>
<List>
<ListItem onPress={()=> navigation.navigate('Video Player', {
external: true,
videoURL: 'https://www.w3schools.com/html/mov_bbb.mp4'
})}>
<Text>External video source</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
function VideoPlayerScreen({ route, navigation }) {
const {external, videoURL } = route.params;
return (
<Container>
<Video
source={{uri: videoURL}} // Can be a URL or a local file.
style={styles.backgroundVideo}
/>
</Container>
);
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name ='Video List' component={VideoListScreen} />
<Stack.Screen name ='Video Player' component={VideoPlayerScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
I want to play video when the user taps on the item in the list, but right now im getting an error -> Component Exception, undefined is not an object (evaluating 'RTCVideoInsance.Constants'),
this is the video player library im using https://github.com/react-native-video/react-native-video.
Thanks for the help
Running pod install in cd ios after yarn install
source : https://github.com/react-native-video/react-native-video/issues/1502
if you already install pod then try to clean xcode project and then build again.
This will help if developing with expo
1). expo install expo-av
2). Your App.js should be look like this.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Video } from 'expo-av';
export default class App extends React.Component {
render(){
return (
< View style={styles.container} >
< Text >Open up App.js to start working on your app!< / Text >
< Video
source={{ uri: 'https://www.yourdomain.com/uploads/video_file.mp4' }}
shouldPlay
useNativeControls
style={{ width: "100%", height: "50%" }}
/>
</ View >
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
3). Then expo start
I am writing my first React App (using create-react-app) and I wrote a Map component using google-maps-react. However, the links BELOW the map cannot be clicked.
Actually, on my webpage, this issue is present only on small and medium-sized screens, while it works perfectly on large screens (small, medium and large as defined by materializecss). I tried to reproduce the issue on a minimal working example, without materialize, just using the boilerplate code created by `npx create-react-app my-app' and adding the following:
MapComponent.js
import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '80vw',
height: '45vw',
marginLeft: 'auto',
marginRight: 'auto',
display: 'block'
};
const MapComponent = (props) => {
return (
<div className="MapComponent">
<div>
Google
</div>
<Map
google={props.google}
zoom={10}
style={mapStyles}
initialCenter={{
lat: 40,
lng: 12
}}
/>
<div>
Google
</div>
</div>
);
}
export default GoogleApiWrapper({
apiKey: "Key"
})(MapComponent);
and then in App.js:
import React, { Component } from 'react';
import MapComponent from './MapComponent';
class App extends Component {
render() {
return (
<div className="Appr">
<MapComponent />
</div>
);
}
}
export default App;
(the key is not reported in the example, so maps will display the frame with an error message, but the issue is the same with the key). The first link to google.com can be clicked and works, while the second does not. Any solution/workaround?
Finally, I went through the source code of google-maps-react and found the solution. It is very simple but rather undocumented. Apart from style the Map component accepts a containerStyle prop, allowing to change the tyle of the container wrapping Map. By default, the position is set to position: absolute giving the aforementioned behavior. The following code solves the issue for me:
import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '80vw',
height: '45vw',
marginLeft: 'auto',
marginRight: 'auto',
display: 'block'
};
const containerStyle = { {/* Added style */}
position: 'static'
}
const MapComponent = (props) => {
return (
<div className="MapComponent">
<div>
Google
</div>
<Map
google={props.google}
zoom={10}
style={mapStyles}
containerStyle={containerStyle} {/* Added prop */}
initialCenter={{
lat: 40,
lng: 12
}}
/>
<div>
Google
</div>
</div>
);
}
export default GoogleApiWrapper({
apiKey: "Key"
})(MapComponent);
I am experiencing the same issue here, Coverflow works fine for gatsby develop but for build it throws an error:
WebpackError: window is not defined
WebpackError: window is not defined
- react-coverflow.js:1 Object.<anonymous>
~/react-coverflow/dist/react-coverflow.js:1:330
- main.js:1 Object.<anonymous>
~/react-coverflow/main.js:1:1
I think it is caused by the this library "Coverflow"
import Coverflow from 'react-coverflow';
import { StyleRoot } from 'radium'
class Team extends React.Component {
render(){
return(
<StyleRoot>
<Coverflow
displayQuantityOfSide={2}
navigation
infiniteScroll
enableHeading
active={0}
media={{
'#media (max-width: 720px)': {
width: '100%',
height: '200px'
},
'#media (min-width: 720px)': {
width: '100%',
height: '400px',
}
}}
>
<img src={Sandiso} alt='Chairperson'/>
<img src={Sihle} alt='Deputy Chairperson' />
<img src={olwethu} alt='General Secretary' />
<img src={Aphiwe} alt='Recording Secretary'/>
<img src={cynoh} alt='Treasury'/>
<img src={aso} alt='Marketing' />
</Coverflow>
</StyleRoot>
)
}
}
export default Team;
Haven't looked fully into the other suggested answer re: React.Lazy and Suspense, but ran up against a similar problem trying to instantiate Intersection Observer and found a simpler answer in Kyle Matthew's response to this issue:
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-223360361
That is—potentially, you can import your package or whatever is looking for window in the componentDidMount method (or a useEffect hook) of your component.
The package 'react-coverflow' is probably expecting itself to be run on browser, which is why gatsby yells at you when it tries to render the component on server side. If you're using Gatsby v2 which seems to ship with react^16.6, you could dynamically load the component with React's lazy and Suspense combo:
// src/components/coverflow.js
import React from 'react'
import Coverflow from 'react-coverflow'
export default () => (
<Coverflow>
{/* your coverflow setup */}
</Coverflow>
)
Then you can lazy load the component on a page like this:
// src/pages/index.js
const LazyCoverflow = () => {
if (typeof window === 'undefined') return <span>loading...</span>
const Component = lazy(() => import('../components/coverflow'))
return (
<>
<Suspense fallback={<span>loading...</span>}>
<Component />
</Suspense>
</>
)
}
export default () => (
<Layout>
{/* other components */}
<LazyCoverflow />
</Layout>
)
Check out the lazy & Suspense doc on reactjs.org.