html5 视频（MP4）无法自动启动

Question

我有一个 React 页面，我想在其中添加视频，但自动播放不起作用我正在使用 Opera GX，但我也在 Chrome 和 Edge 上尝试过，但自动播放仍然无法在其中任何一个上运行：

import React from 'react';
import './home.css'; 
import video from '../../images/backgroundvid.mp4';

const Home = () => {
  return (
    <video src={video} width="750" height="500"  autoplay muted loop>
      </video>
  );
};

export default Home;

当我添加控件并手动播放视频时，它可以工作：

<video src={video} width="750" height="500" controls autoplay muted loop>

Answer 1

您的视频标签没有

source

和

type

...也许这就是问题所在？

我不使用 React，但通常（在 HTML 中）正确的设置应该如下所示：

import React from 'react';
import './home.css'; 
import video from '../../images/backgroundvid.mp4';

const Home = () => {
  return (
            <video width="750" height="500" muted autoplay loop>
            <source src={video} type="video/mp4">
            </video>
         );
};

export default Home;