很多视频不会在安卓智能手机上显示

如何解决很多视频不会在安卓智能手机上显示

我有一个网站，里面有大约 30 个卡片设计视频。虽然在桌面上运行良好，但视频无法在我的 android 智能手机上正确加载。我使用 .mov 是因为它在 iOS + Windows 上运行良好，并且稍后在视口中使用 data-src 加载。我用 .mp4 文件对其进行了测试，并遇到了同样的问题。 src 元素是填充卡片直到它改变的元素。

我如何重现该问题： - 使用下面的代码创建 html 文件并将其放在我的本地网络服务器 XAMPP 上 - 从我的智能手机浏览本地 IP

问题：有些视频会加载，但大多数不会。刷新页面时，其他无效的视频和无效的视频可能无效。

出于隐私原因，我不得不删除文件名。

<!doctype html>
<html lang="de">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
</head>
<body>

<video class="vid" playsinline muted loop src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="./assets/videos/" alt="" type="video/quicktime"></video>
<video class="vid" playsinline muted loop src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="./assets/videos/" alt="" type="video/quicktime"></video>
<video type="video/quicktime" class="vid" playsinline muted loop src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="./assets/videos/" alt=""></video>
<video type="video/quicktime" class="vid" playsinline muted loop src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="./assets/videos/" alt=""></video>
<video type="video/quicktime" class="vid" playsinline muted  loop src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="./assets/videos/" alt=""></video>

<script type="text/javascript">
// load images when in viewport
refresh_handler = function(e) {
var elements = document.querySelectorAll("*[data-src]");
for (var i = 0; i < elements.length; i++) {
        var boundingClientRect = elements[i].getBoundingClientRect();
        if (elements[i].hasAttribute("data-src")) {
            elements[i].setAttribute("src",elements[i].getAttribute("data-src"));
            elements[i].removeAttribute("data-src");
        }
    }
};
window.addEventListener('scroll',refresh_handler);
window.addEventListener('load',refresh_handler);
window.addEventListener('resize',refresh_handler);
</script>
  </body>
</html>

解决方法

我浪费了数小时的研究来定位问题但没有结果，但我至少找到了一个解决方法。当为 video 赋予视频第一帧的 poster 属性为 png 时，一切都在所有可能的设备上显示正确。我将其标记为已解决，但未找到问题的根源。在没有 poster 属性的情况下工作时，某些视频不会加载，如果您继续 download video，视频会出错并且无法通过 android 视频应用程序显示。很奇怪...，也许我达到了缓存限制或其他什么，需要更多时间来调查，而我没有。