load local mp4 file as source for video tag in React Gatsby website

问题

Goal: I'm trying to loop a video infinitely on a React gatsby site. I have a mp4 file locally under assets, but it doesn't show up on my screen.

What I've tried: I thought it might be a CSS issue so I set it and it's clearly width and height 100% of the window but video is still not showing up.

JS:

import React from "react"
import "./index.css"
export default () => (
  <div>
    <video id="background-video" loop autoPlay>
      <source src="..\assets\video\Cenote_Squad_Cinemagraph_1500x840_Final.mp4" type="video/mp4"/>
      Your browser does not support the video tag.
    </video>
  </div>
)

CSS:

#background-video {
    height: 100%;
    width: 100%;
    float: left;
    top: 0;
    padding: none;
    position: fixed;
    /* optional depending on what you want to do in your app */
}

回答1:

turned out you need to use

require("..\assets\video\Cenote_Squad_Cinemagraph_1500x840_Final.mp4")

as src

回答2:

I'm using this configuration:

import forest from "../../images/forest.mp4"
//import the video file and then 

<video width="100%" height="100vh"  preload='auto' poster={poster} loop autoPlay muted>
 <source src={video} type="video/mp4" />
 Your browser does not support HTML5 video.
</video>

来源：https://stackoverflow.com/questions/55837024/load-local-mp4-file-as-source-for-video-tag-in-react-gatsby-website