如何检测正在使用的设备和浏览器，以便视频组件的自动播放在 iOS 设备上运行？ [React.js]

编程问答 2022-05-19

问题描述

问题

我正在创建我的网络投资组合，并在后台循环播放视频。当在所有主要浏览器（Chrome、Firefox、Safari）和我的 Android 上使用桌面上的所有主要浏览器（Chrome、Firefox、Safari）时，这在我的网站上运行良好，但出于某种原因，Firefox 除外……但我意识到 iOS 覆盖了视频标签上的 autoplay 属性。然后我的网站在后台留下一个巨大的播放按钮，用户无法按下它，因为它的 z-index 是 -1。


我提出的解决方案

为了解决这个问题，我想也许我可以检测到正在使用的设备和浏览器，然后使用条件渲染在后台播放相同视频的 gif。我知道这似乎不是最实用的方法，但至少我可以让 iOS 设备上的主要浏览器显示某些内容而不是无法访问的播放按钮。


我需要知道的

我可以使用什么代码来检测正在使用的设备和浏览器，或者使用浏览器就足够了，我不必担心设备？或者也许有更实用的方法来解决这个问题？也许我的代码有问题？任何事情都会有所帮助！


代码

<video
    autoplay
    playsInline
    loop
    muted
    style={{
      position: 'absolute',width: '100%',left: '50%',right: '50%',top: '50%',height: '100%',objectFit: 'cover',transform: 'translate(-50%,-50%)',zIndex: '-1'
    }}
    >
    <source src={s3Bucketobject} type='video/mp4' />
  </video>

解决方法

您可以解析用户代理 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent，但这不会很有趣，而且您可能会忘记某些情况。

最好的选择是使用像 https://www.npmjs.com/package/react-device-detect 这样的库，这是 React 最流行的。

autoplayautoplayiosiosmobilereactjsreactjsreactjsreactjsvideovideo