NEXTJS 中的视频渲染

Question

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

代码：

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

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