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

Question

我有一个网站，里面有大约 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 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>
<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>
<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>
<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>
<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>

Answer 1

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

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

Lots of videos won't show on android smartphone

html

javascript

css

video