Video autoplay not working with React. Help me?

Question

I work with React and Webpack. My problem is with autoplay check my code:

import React from "react";
import "../assets/styles/Components/Description.scss"
import Mafer from "../assets/static/Mafer.png"
import video from "../assets/static/VideoTS.mp4";

export default function Description() {
  return (
    <>
      <header>
        <a href="./main.html" class="logo">
          Maria<span>Fernanda</span>
        </a>
      </header>
      <div class="banner">
        <video
          src={video}
          autoplay={true}
          muted
          loop
          type="mp4"
        />

Webpack:

{
        test: /\.mp4$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "video",
            },
          },
        ],
      },

Console Error react-dom.development.js:67 Warning: Invalid DOM property autoplay. Did you mean autoPlay? at video at div at Description

Answer 1

From the error, I think you should use this:

<video
  src={video}
  autoPlay={true}
  muted
  loop
  type="mp4"
/>

Here, autoplay is changed to autoPlay. Most attributes requires to be passed in a camelCase fashion in React jsx. There are although couple exceptions, for example the data attributes data-*

Those don't need to be passed in camelCase format. Same goes for aria attributes aria-*

Example from React docs:

<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>