使用 React 无法在移动设备上播放视频答案

【问题标题】：Video not playing on mobile using React使用 React 无法在移动设备上播放视频
【发布时间】：2021-03-23 08:14:42
【问题描述】：

有没有人遇到过类似的问题，视频可以在桌面上播放，但不能在移动设备上播放？

<video className="app__backgroundVideo" autoplay="autoplay" loop="loop" muted>
          <source src={Video} type="video/mp4" />
          Your browser does not support the video tag.
</video>

【问题讨论】：

标签： reactjs

【解决方案1】：

尝试以下方法：

<div
          dangerouslySetInnerHTML={{
            __html: `<video className="app__backgroundVideo" autoplay loop muted playsinline>
      <source src=${Video} type="video/mp4" />
      Your browser does not support the video tag.
</video>`,
          }}
        />

解释主要在Medium 链接中，其中包含更多详细信息。看起来 Safari 存在问题，即不能保证在 DOM 中设置 muted 属性，这在使用 Safari 访问时会导致问题。如果这不起作用，中等链接有更多解决方案。它对我有用。

参考资料：

中等。在移动设备（Safari / iOS 10+）上使用 React 自动播放静音 HTML5 视频。 https://medium.com/@BoltAssaults/autoplay-muted-html5-video-safari-ios-10-in-react-673ae50ba1f5。（2020 年 12 月 11 日访问）

堆栈溢出。 React (HTML) 视频标签不会在移动设备上自动播放。 https://stackoverflow.com/a/59418124/8121551。（2020 年 12 月 11 日访问）

【讨论】：

谢谢！完全解决了问题，现在一切正常，感谢您的帮助

【解决方案2】：

对于正在寻找不使用危险SetInnerHTML 的解决方案的任何人，您可以尝试这个基于钩子的出色解决方案，这是我在一些令人沮丧的时间后发现的（对我有用）。您应该实现一个自定义组件，而不是直接使用 HTML5 视频标签：

import React, {useRef, useEffect} from "react"

export default function AutoPlaySilentVideo(props) {
    const videoRef = useRef(undefined);
    useEffect(() => {
        videoRef.current.defaultMuted = true;
    })
    return (
        <video
            className={props.className}
            ref={videoRef}
            loop
            autoPlay
            muted
            playsInline>
            <source src={props.video} type="video/mp4"/>
        </video>
    );
}

如果需要，您将使用视频源作为道具，最后使用 className。

这个问题在 React 社区中是众所周知的，并且由于某些原因，它在过去几年中一直（官方）没有解决。问题是 muted 属性不会作为节点显示在 DOM 中。你可以阅读更多关于这个here的信息。

【讨论】：