NEXTJS 中的视频渲染

Question

我正在使用 NextJS，我试图将视频作为背景。在 FIRST 渲染中一切正常，但是当我重新加载屏幕时，视频不会在自动播放模式下运行。

代码：

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

我该如何解决这个问题？

Answer 1

我已将循环添加到您的代码中。希望能解决你的问题

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

Answer 2

仅供参考，有声视频即使循环和自动播放也无法重新加载，浏览器不允许。 解决方案是设置自动播放、循环、静音和控制，以便您可以根据需要启动声音。

Answer 3

对于播放视频，这与 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"/>

Answer 4

您的代码中缺少

muted

属性，如此答案中所述。这是通过浏览器自动播放规则的最重要元素。

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

这篇博文详细介绍了背景视频+next.js。