NEXTJS 中的视频渲染答案

【问题标题】：Video Render in NEXTJSNEXTJS 中的视频渲染
【发布时间】：2020-12-22 15:32:04
【问题描述】：

我正在使用 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

我该如何解决这个问题？

【问题讨论】：

标签： reactjs video-streaming next.js

【解决方案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

【讨论】：