当使用HTML5视频标签时，一些视频在移动设备上显示为白屏

Question

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

我试着从我的移动设备上传几个视频来测试应用程序。它对大多数视频都很好，但对于一些看似随机的(但总是相同的)视频，在移动设备上测试时显示的是白屏而不是视频.

我主要用2个视频进行测试，一个可以工作，另一个不行。两者都是相同的格式(mp4)，具有相似的文件大小和相同的帧分辨率，这让我感到困惑，不知道是什么原因造成的。

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

非工作视频链接(13秒，34 MB)

工作示例的屏幕截图

一个不工作的例子的截图

已部署的应用程序，如果你想自己尝试

主组件代码:

import React from 'react';
import './App.css';
import {useState} from 'react';
function App() {
let [vidBase64, setVidBase64] = useState(null);
return vidBase64 == null ?
<input type={"file"} accept={'video/mp4,video/x-m4v,video/*'} onChange={e => onVideoSelected(e, setVidBase64)} /> :
<video src={vidBase64} style={{width: '100%', maxWidth: '400px', border: '1px solid black'}}></video>;
}
function onVideoSelected(e, setVidBase64) {
let file = e.target.files[0];
if (file == null) return;
let reader = new FileReader();
reader.onload = () => onVideoLoaded(setVidBase64, reader);
reader.readAsDataURL(file);
}
function onVideoLoaded(setVidBase64, reader) {
setVidBase64(reader.result);
}
export default App;

任何帮助都是感激的。

Answer 1

嘿，Jonathan，你错误地使用了视频标签。

你可以在这里查看w3schools文档。

你需要将你的video标签改为this，参见codesandbox的工作示例。

<video style={{width: '100%', maxWidth: '400px', border: '1px solid black'}}>
<source src={vidBase64} type="video/mp4" />
</video>;