Question

目标： 我正在尝试在React gatsby网站上无限循环播放视频。我在资产下本地有一个mp4文件，但是它没有显示在屏幕上。

我尝试过的事情：我以为这可能是CSS问题，所以我对其进行了设置，显然它是窗口的宽度和高度的100％，但是视频仍然没有显示。

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 */
}

Answer 1

原来您需要使用

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

为src

Answer 2

我正在使用此配置：

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <node th:each="value: ${values}" th:text="${value} />
</root>

在React Gatsby网站中加载本地mp4文件作为视频标签的源

2 个答案: