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

【问题标题】：Is it posible to add video in background with next.js?是否可以使用 next.js 在后台添加视频？
【发布时间】：2020-06-16 12:19:34
【问题描述】：

在反应中我会做这样的事情：

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 中执行它，比如强制它等待并在浏览器中获取视频？

【问题讨论】：

标签： video next.js

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

}

【讨论】：