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

Posted 2023-05-07

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

【英文标题】：Some videos appear as a white screen on mobile when using an HTML5 video tag

【发布时间】：2021-11-28 22:53:25

【问题描述】：

我有一个简单的 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;

感谢任何帮助。

【问题讨论】：

不要base64编码你的视频oO。请改用 blob: URL，请参阅 ***.com/q/36035721/3702797

【参考方案1】：

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

您可以查看 w3schools 文档here。

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

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

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

</video>;

【讨论】：

嘿尼丁。我从手机运行沙箱并尝试上传有问题的视频，但不幸的是它似乎仍然无法正常工作。我将编辑我的问题并添加指向无效视频的链接。谢谢。

您正在尝试哪种格式的视频，是 mp4 吗？如果是，请尝试从电脑上传。即使在那之后，如果您遇到问题，请检查视频大小，如果它很大，则根据大小需要时间才能出现。如果不是 mp4 ，请参阅 w3school 链接中支持的格式。

这是一个mp4视频，大小为33MB。大小不是问题，因为其他具有相似（和更大）大小的视频会按预期显示。如问题所述，我已尝试从我的 PC 上传这两个视频，并且都运行良好。移动浏览器是其中一个视频不起作用的地方。