在某些移动设备上工作的 CSS 动画和视频标签

Question

我的网站上有一些简单的动画和一个视频标签(我在最后展示了代码)。正如您想象的那样，它在桌面上运行完美，但在智能设备上却不行。我已经尝试过几个:

1. Galaxy mini 1:动画和视频都无法运行，多个浏览器都试过了。 (Android 2.2)
2. Huawei G-Ascend 3000:动画和视频都不行，几个浏览器都试过了。 (Android 4.0.3)
3. Galaxy Tablet:动画有效，视频已缓冲但未播放。 (Android 4.X，不太确定是哪个，我的错)。
4. Sony Xperia T2:一切正常。 (Android 5.0)

为了在智能设备上“模拟”自动播放，我有一个按钮可以在其 onclick 事件上播放视频。无论如何，那是另一个问题。我担心的是为什么所有这些在某些设备上有效而在其他设备上无效，我如何隔离一条规则说:'嘿，在这个设备上我不应该包括动画或视频，或者我应该其中之一而不是其他'(或者我应该为兼容性包括什么？)。我特别关心动画。

提前致谢。

CSS3 动画

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-o-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

div {
    animation: fadeIn 1s ease-in-out 11s forwards;
    -webkit-animation: fadeIn 1s ease-in-out 11s forwards;
    -moz-animation: fadeIn 1s ease-in-out 11s forwards;
    -o-animation: fadeIn 1s ease-in-out 11s forwards;
}

HTML5 视频标签

<video  autoplay preload="auto" loop poster="./images/starry_sky.jpg" id="video-background">
    <source src="./videos/time_lapse.webm" type="video/webm">
    <source src="./videos/time_lapse.mp4" type="video/mp4">
    <source src="./videos/time_lapse.ogv" type="video/ogg">
    <img src="./images/starry_sky.jpg">
</video>

更新

视频属性:

• 网站:2.43 MB
• MP4:861KB
• OGG:2.86 MB

每帧 1280x680 像素，30 fps，540bps，13 秒，无声音。

Answer 1

首先是关键帧，我想不出一个真正可行的理由来说明为什么设备不喜欢它们，除非它们的浏览器不完全支持 CSS3。

你可能最好只使用 Jquery/javascript 来实现淡入淡出效果。

---

现在是您的视频，Android 在视频方面一直是个精神病患者。

有些设备更喜欢 .mkv，而其他设备更喜欢 .webm，您绝对应该考虑将 .mkv 视频添加到您的站点。

也从你的视频中删除类型属性，或者至少从你知道 android 将使用 mkv 或 webm 的视频中删除它，因为它变得有趣我老实说没有解释为什么我的猜测是它只是一个错误。

关于播放，您必须始终使用 Jquery 或 javascript 为 Android 设备调用播放，但从外观上您已经注意到这一点。

此外，某些设备上的编码可能有点疯狂，有时如果视频的尺寸不符合预期，设备将无法播放视频，我认为您的视频在 1280 像素宽度时不稳定，它应该有 720 像素高度以保持正确的纵横比设备不会播放不遵守严格编解码器格式的视频可能值得花时间查看此处的 android 视频编码指南 http://developer.android.com/guide/appendix/media-formats.html