CODEWITHSUNDEEP
reactjsvideo-streamingnext.js
Ricardo Lopes
Ricardo Lopes

Reputation: 149

Video Render in NEXTJS

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?

Upvotes: 12

Views: 61860

Answers (4)

heff
heff

Reputation: 3239

You're missing the muted attribute in your code, as mentioned in this answer. That's the most important element for getting past browser autoplay rules.

<video autoPlay muted loop style={{ width: '500px', height: '500px' }}>
  <source src="/blue.mp4" />
</video>

This blog post walks through background videos + next.js in detail.

Upvotes: 0

Aylon Spigel
Aylon Spigel

Reputation: 39

For playing a video this was working well with Next v12

import ReactPlayer from "react-player/lazy";

<ReactPlayer 
width="530px" 
height="300px" 
url="https://www.youtube.com/embed/Te_DTmOt4Xw" 
light="/static/normal-sarong-0007.jpg"/>

Upvotes: 2

bruno Nam
bruno Nam

Reputation: 71

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.

Upvotes: 6

Ndifreke Umoren
Ndifreke Umoren

Reputation: 159

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

Upvotes: 15

Related Questions