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

Question

我正在React中使用HTML5<video>标记渲染视频，当我在iPhone上打开网站时，视频将在本机iOS Safari视频播放器中播放，但当我更改方向以横向模式观看视频时，视频会关闭。我需要实现HTML5视频标签的一些配置吗？或者这是我的React渲染的问题？

为了获得更多的见解，我正在开发一个算法可视化工具，我暂时不想在手机上支持它。因此，我使用一些媒体查询来显示一个模态，该模态告诉用户在移动时在更大的屏幕上打开页面。在模态中，我有一个网站的视频用于演示目的，所以我希望人们能够在手机上正确观看视频，如果他们在播放后改变方向，就不必重新打开视频。

我在媒体查询方面遇到了一些问题，比如在中，当在移动设备上更改为横向模式时，模态会消失，并且会尝试渲染可视化工具，因为我只使用最大宽度查询。因此，我将其更改为实现最大高度媒体查询。这可能是问题所在吗？

编辑示例：

const Video = ({ src }) => {
return (
<video controls width="100%" preload="auto">
<source src={src} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
)
}
const App = () => {
// Media Queries using ChakraUI hooks
const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");
// renders "error" modal on mobile regardless of portrait or landscape
if (wIsSmallerThan48em || hIsSmallerThan30em){
return (
<Modal>
<Video src={MyVideo} />
</Modal>
)
} else {
return (
<Visualizer />
)
}
}

Answer 1

花了这么多时间弄清楚这个问题后，我觉得自己很愚蠢，然而，我想我会公布答案，以防有人面临类似的问题。

这个问题与React渲染过程有关。每当媒体查询更新时，<Modal/>都会重新渲染，而每当移动设备上的方向发生变化时，就会发生这种情况。由于这个原因，视频将关闭，因为模态是在方向改变时重新渲染的。我不知道为什么媒体查询会导致重新渲染(可能与ChakraUI挂钩的设置有关(，也许有人可以详细说明他们是否遇到了这种情况。但是，切换到状态起到了作用。

修复方法很简单：

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])
// renders "error" modal on mobile regardless of portrait or landscape
if (showModal){
return (
<Modal>
<Video src={MyVideo} />
</Modal>
)
} else {
return (
<Visualizer />
)
}