时间戳

首页 > 解决方案 > 视频自动播放不适用于 React。帮我？

javascript - 视频自动播放不适用于 React。帮我？

问题描述

我使用 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 的视频中 描述

标签： javascriptreactjswebpackautoplay

解决方案

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

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

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

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

来自 React文档的示例：

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

推荐阅读