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

Question

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

我尝试从我的移动设备上传几个视频来测试应用。它适用于大多数视频，但对于一些看似随机（但始终相同）的视频，在移动设备上测试时会显示白屏而不是视频。

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

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

A link to the non working video (13 seconds, 34 MB)

A screenshot of a working example

A screenshot of a non working example

The deployed app in case you want to try for yourself

主要组件的代码：

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

嘿，乔纳森，你错误地使用了视频标签。

您可以查看 w3schools 文档here。

您需要将视频标签更改为此，请参阅codesandbox 的工作示例。

<video style={{width: '100%', maxWidth: '400px', border: '1px solid black'}}>

  <source src={vidBase64} type="video/mp4" />

</video>;