react.js，视频无法在手机上播放

Question

我制作了一个反应网络，其中有一个视频作为背景图像。它可以在 PC 上运行，但不能在移动设备上运行，至少不能在我的 iPhone 上运行。 经过几个小时的搜索，以几种不同的方式编辑自动播放、内联播放等后，没有任何变化。在移动设备上，网页仅显示空白背景。

我使用绝对位置和 zIndex 使其作为背景图像运行。

我的代码如下。

      <video
        id="video"
        width="100%"
        height="100%"
        autoPlay="autoplay"
        playsInLine="playsinline"
        loop="true"
        muted="true"
        style={{
          position: "absolute",
          zIndex: -1,
          opacity: 0.5,
          objectFit: "cover",
        }}
        src={bgv}
        type="video/mp4"
      ></video>

Answer 1

由于移动浏览器施加的一些限制和要求，您遇到的视频无法在移动设备（尤其是 iPhone）上播放的问题非常常见。具体来说，由于数据和电池使用问题，移动浏览器通常需要用户交互（如点击）才能开始播放媒体文件。

您的代码在属性方面看起来是正确的，但您应该考虑一些调整和最佳实践：

1. 布尔属性：对于

   autoPlay

   、

   playsInLine

   、

   loop

   和

   muted

   属性，您应该使用不带值的它们，因为它们是 HTML 中的布尔属性。

2. 视频控件：添加后备消息或考虑显示用户可以与之交互以启动视频的播放按钮。

您更新后的代码可能如下所示：

<video
      id="video"
      width="100%"
      height="100%"
      autoPlay
      playsInline
      loop
      muted
      style={{
        position: "absolute",
        zIndex: -1,
        opacity: 0.5,
        objectFit: "cover",
      }}
      src={bgv}
      type="video/mp4"
    >
      Your browser does not support the video tag.
    </video>

此外，您可以通过在 React 中添加事件监听器来确保视频在页面加载时开始播放。

import React, { useEffect } from 'react';

const BackgroundVideo = ({ bgv }) => {
  useEffect(() => {
    const videoElement = document.getElementById('video');
    if (videoElement) {
      videoElement.play().catch((error) => {
        console.error('Error attempting to play', error);
        // Attempt to handle error or show play button
      });
    }
  }, []);

  return (
    <video
      id="video"
      width="100%"
      height="100%"
      autoPlay
      playsInline
      loop
      muted
      style={{
        position: "absolute",
        zIndex: -1,
        opacity: 0.5,
        objectFit: "cover",
      }}
      src={bgv}
      type="video/mp4"
    >
      Your browser does not support the video tag.
    </video>
  );
};

export default BackgroundVideo;