javascript - HTML 视频标签无法显示帧宽/高为 4096 或更大的视频

Question

我有一个简单的 React 应用程序，用户可以从他们的设备上传视频，然后使用<video>标签将视频显示在页面上。

我尝试从我的移动设备上传几个视频来测试应用程序。我注意到当分辨率很大（宽度或高度为 4096 像素）时，应用程序无法正确显示视频。1920x1080 甚至 3840x2160 的分辨率都可以正常工作。但是 4096x2160 始终会导致空白屏幕。

请注意，这似乎只发生在移动浏览器上。在我的 PC 上运行该应用程序时，所有视频都可以正常工作。

如何让应用程序支持更大分辨率的视频？有没有简单的外部 JS 库可以解决这个问题？

指向无法在移动设备上播放的高分辨率视频的链接（13 秒，34 MB）

工作示例的屏幕截图

非工作示例的屏幕截图

部署的应用程序，以防您想自己尝试

主要组件的代码：

import React, {useState} from 'react';
import './App.css';

function App() {
    let [vid, setVid] = useState(null);

    return vid == null ?
        <input type={"file"} accept={'video/mp4,video/x-m4v,video/*'} onChange={e => onVideoSelected(e, setVid)} /> :
        <video style={{width: '100%', maxWidth: '400px', border: '1px solid black'}} autoPlay={true} muted={true}>
            <source src={vid} type="video/mp4" />
        </video>;
}

function onVideoSelected(e, setVid) {
    let file = e.target.files[0];
    let blob = URL.createObjectURL(file);
    setVid(blob);
}

export default App;

任何帮助表示赞赏。

标签： javascripthtmlreactjsvideo