是否可以使用 Next.js 在后台添加视频？

Question

在 React 中我会做类似的事情：

type Props = {
 url: string;
}
export const Video: React.FC<Props> = ({url}) => {

  return (
    <video
      id="background-video"
      loop
      autoPlay
      muted
      style={{
        position: "relative",
        width: "100%",
        height: "15rem",
        left: 0,
        top: 0,
      }}
    >
      <source src={url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
};

但是我应该如何在 Next.js 中执行此操作，例如强制它等待并在浏览器中获取视频？

Answer 1

当然可以。您的问题与 NextJS 无关

自动播放将在页面的每次渲染上运行。

如果您想延迟视频，可以通过添加setTmeout,useRef和useEffect

另外，您应该将样式移至video标签

看看这个：

import React, { useEffect, useRef } from 'react';

export default () => {
    const videoRef = useRef();

    useEffect(() => {
        setTimeout(()=>{
            videoRef.current.play()
        },5000)
    }, []);

    return (
        <video
            ref={videoRef}
            controls
            width="250"
            loop
            muted
            style={{...}}>
               <source {...{sourceProps}}>
       </video>
      )
}