【问题标题】: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的信息。

    【讨论】:

      猜你喜欢
      • 2020-02-24
      • 2021-12-01
      • 2019-11-14
      • 2013-09-06
      • 2019-04-02
      • 1970-01-01
      • 2019-10-18
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多