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

How to detect if HTML5 video can be played without user interaction

本文关键字：用户 交互 播放 情况下 何检测 检测 是否 视频 HTML5      更新时间：2023-09-26

检测它是否是触摸设备是不准确的，想想触摸屏笔记本电脑吧。

基本上，如果没有用户交互就无法开始播放，我希望能够避免显示视频。

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

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

如果你播放一个小的透明测试视频并监控它的进度会怎么样？我还猜测这将与Modernizr结合在一起。

http://modernizr.com/

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");
}

恐怕您必须开始播放并侦听播放事件，或者您需要检查用户代理字符串，以查找您知道不会播放的浏览器，如Mobile Safari。

由于这与标准有偏差，媒体API没有提前提供任何具体的检测方法，modernizr可能无法帮助您。iOS可能是最大的罪魁祸首，所以让我们来看看。在几天前发布最新版本之前，iOS甚至不会在发生触摸事件之前加载视频的元数据。因此，您可以通过将视频设置为预加载元数据并等待loadedmetadata事件超时来检测它。

但在iOS 8中，API确实加载了元数据，甚至会触发canplaythrough并报告大量视频已被缓冲。所以，似乎唯一的方法是尝试和发挥。

（也就是说，我不知道浏览器是否真的加载了它所说的那么多视频，因为即使在你开始播放之后，开发工具中的网络时间线也不会显示太多。）

相关文章：