更改方向在Safari iOS上播放HTML5视频时会导致视频关闭

Question

我正在使用React和HTML5的<video>标签渲染视频，当我在iPhone上打开网站时，视频会在本机iOSSafari视频播放器中播放。然而，当我改变方向以在横向模式下观看视频时，视频会关闭。我需要实现HTML5视频标签的某些配置吗？还是这是我React渲染的问题？为了更好地理解，我正在开发一个算法可视化器，暂时不支持移动设备。因此，我使用一些媒体查询来显示一个模态框，告诉用户在

P粉287726308 · Answer

在花了这么多时间来解决这个问题后，我感觉自己很愚蠢，但是我想把答案发出来，以防其他人遇到类似的问题。

问题与React的渲染过程有关。每当媒体查询更新时，会重新渲染，这在移动设备上更改方向时会发生。因此，当模态框在方向更改时重新渲染时，视频会关闭。我不确定为什么媒体查询会导致重新渲染（可能与ChakraUI hooks的设置有关），如果有人遇到这个问题，也许可以详细说明一下。但是，切换到状态解决了问题。

解决方法很简单：

const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
  const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");
  
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    if (wIsSmallerThan48em || hIsSmallerThan30em){
       setShowModal(true)
    } else {
       setShowModal(false)
    }
  }, [wIsSmallerThan48em, hIsSmallerThan30em])

  // 在移动设备上无论是纵向还是横向都渲染“错误”模态框
  if (showModal){
     return (
        
            
     )
  } else {
     return (
      
     )
  }

热门工具标签

Hot Questions

Hot Tools

vc9-vc14（32+64位）运行库合集（链接在下方）

VC9 32位

php程序员工具箱完整版

VC11 32位

SublimeText3汉化版

热门话题

热门文章