视频自动播放不适用于 React。帮我？答案

【问题标题】：Video autoplay not working with React. Help me?视频自动播放不适用于 React。帮我？
【发布时间】：2021-06-28 18:11:54
【问题描述】：

我使用 React 和 Webpack。我的问题是自动播放检查我的代码：

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"
        />

网页包：

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

控制台错误 react-dom.development.js:67 警告：无效的 DOM 属性autoplay。你的意思是autoPlay？在视频中在 div 在说明

【问题讨论】：

你试过改变它autoPlay??如果是这样，发生了什么...

标签： javascript reactjs webpack autoplay

【解决方案1】：

从错误来看，我认为你应该使用这个：

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

这里，autoplay 更改为 autoPlay。大多数属性需要在 React jsx 中以驼峰式方式传递。虽然有几个例外，例如数据属性 data-*

那些不需要以驼峰格式传递。同样适用于 aria 属性 aria-*

来自 React docs 的示例：

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

【讨论】：

感谢您对@martline1 的认可。