更改方向在Safari iOS上播放HTML5视频时会导致视频关闭
P粉413307845
2023-08-30 20:49:37
<p>我正在使用React和HTML5的<code><video></code>标签渲染视频，当我在iPhone上打开网站时，视频会在本机iOS Safari视频播放器中播放。然而，当我改变方向以在横向模式下观看视频时，视频会关闭。我需要实现HTML5视频标签的某些配置吗？还是这是我React渲染的问题？</p>
<p>为了更好地理解，我正在开发一个算法可视化器，暂时不支持移动设备。因此，我使用一些媒体查询来显示一个模态框，告诉用户在移动设备上打开页面时要使用更大的屏幕。在模态框中，我有一个网站的演示视频，所以我希望人们能够在移动设备上正确观看视频，而不必在播放后更改方向时重新打开视频。</p>
<p>我在媒体查询方面遇到了一些问题，即在移动设备上更改为横向模式时，模态框会消失，并且会尝试渲染可视化器，因为我只使用了max-width查询。所以，我改为同时实现max-height媒体查询。这可能是问题吗？</p>
<p>带有示例的编辑：</p>
<pre class="brush:php;toolbar:false;">const Video = ({ src }) => {
return (
<video controls width="100%" preload="auto">
<source src={src} type="video/mp4" />
您的浏览器不支持HTML5视频。
</video>
)
}
const App = () => {
// 使用ChakraUI hooks的媒体查询
const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");
// 在移动设备上无论是纵向还是横向模式都呈现“错误”模态框
if (wIsSmallerThan48em || hIsSmallerThan30em){
return (
<Modal>
<Video src={MyVideo} />
</Modal>
)
} else {
return (
<Visualizer />
)
}
}</pre></p>
在花了这么多时间来解决这个问题后，我感觉自己很愚蠢，但是我想把答案发出来，以防其他人遇到类似的问题。
问题与React的渲染过程有关。每当媒体查询更新时，
<Modal/>会重新渲染，这在移动设备上更改方向时会发生。因此，当模态框在方向更改时重新渲染时，视频会关闭。我不确定为什么媒体查询会导致重新渲染（可能与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 ( <Modal> <Video src={MyVideo} /> </Modal> ) } else { return ( <Visualizer /> ) }