Question

检测是否是触控设备将不准确，请考虑触摸屏笔记本电脑。

基本上我希望能够避免在没有用户互动的情况下无法开始播放视频。

对于那些认为'你是个坏人'的人：

视频没有音频。
这是页面中的装饰资产，它将是一个背景。
我不关心带宽，我的目标是获得最佳用户体验。像手机这样的设备无论如何都不会有这个视频。

Answer 1

如果您播放了一个微小的透明测试视频并监控其进度，该怎么办？我也猜测这将与Modernizr相结合。

function eventWindowLoaded() {

 var videoElement = document.getElementById("thevideo");

 videoElement.addEventListener('progress',makingProgress,false);
 videoElement.addEventListener('canplaythrough',playVideo,false);

}

function playVideo() {
    var videoElement = document.getElementById("thevideo");
    videoElement.play();
}

function makingProgress() {
    console.log("video can play");
}

Answer 2

我担心您必须开始播放并收听播放事件，或者您需要检查您知道不会播放的浏览器的用户代理字符串，例如Mobile Safari。

由于这是对标准的偏离，因此媒体API并未提供任何特定方式来提前检测到这一点，而现代化可能无法帮助您。 iOS可能是这里最大的罪魁祸首，所以让我们来看看。在几天前发布最新版本之前，iOS在发生触摸事件之前甚至无法加载视频的元数据。因此，您可以通过将视频设置为预加载元数据并等待loadedmetadata事件的超时来检测它。

但是在iOS 8中，API确实加载了元数据，甚至可以触发播放并报告已经缓存了大部分视频。因此，似乎唯一的方法就是实际尝试和发挥。

（也就是说，我无法判断浏览器是否真的加载了它所说的视频，因为开发人员工具中的网络时间线并没有显示出来，即使在你之后也是如此开始玩。）

如何检测HTML5视频是否可以在没有用户交互的情况下播放

2 个答案: