更改方向在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的設定有關),如果有人遇到這個問題,也許可以詳細說明一下。但是,切換到狀態解決了問題。解決方法很簡單: