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

大兔子大兔子 提交于 2021-02-20 00:21:11

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!