Как узнать, запущено ли событие воспроизведения видео в формате HTML, нажатие или автоигра пользователя?

Question

Существует видео-тег HTML с autoplay. Я хочу знать, когда произошло событие play, вызвано ли оно автоматическим воспроизведением или вызвано ли пользователем нажатием кнопки воспроизведения?

Answer 1

AFAIK на самом деле нет пуленепробиваемого способа узнать разницу из коробки (если я не упустил для этого свойства).

Один из способов обойти это в этом случае, используя флаги (ы) на разных этапах. Например, установите флаг в событии canplay на элемент видео, который очищается (истек) в течение разумного периода времени, который затем может использоваться с событием play (я покажу пример в один момент).

Поскольку это немного «хакерский», могут быть особые случаи, когда статус проскальзывает, хотя время предварительной загрузки и подготовки, быстрые пользователи, нажимая кнопку и т. Д., Могут сыграть роль.

концептуальное пример:

(примечание: по какой-то причине в стек-сниппета ниже play триггеров событий на паузу, а ..).

Как всегда, используйте на свой страх и риск!

var video = document.querySelector("video"); 
 

 
var tref;           // to expire flag below 
 
var autoPlay = false;        // if we started by autoplay (expires) 
 

 
video.addEventListener("canplay", function(e) { 
 
    clearTimeout(tref);        // reset expire 
 
    autoPlay = this.autoplay; 
 
    if (!autoPlay) document.querySelector("div").innerHTML = "Ready."; 
 
    setTimeout(function() {autoPlay = false}, 100); // clear autoPlay flag 
 
}); 
 

 
video.addEventListener("play", function(e) { 
 
    document.querySelector("div").innerHTML = autoPlay ? "Autoplay" : "Manual play"; 
 
}); 
 

 
video.src = "//media.w3.org/2010/05/sintel/trailer.mp4";

video {width:320px}

<div>Loading video...</div> 
 
<video muted autoplay controls preload=auto></video>