Chrome Version       : 58.0.3007.0
OS Version: 9280.0.0

When I click the native "play" button of my <video> element, I wish video goes fullscreen with code below.

  document.querySelector('video').addEventListener('play', function(e) {
    e.target.webkitRequestFullscreen();
    // FAIL
  }, { once: true });

However, it raises error "Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.".


For info, using a custom "play" button makes it work:

  document.querySelector('button').addEventListener('click', function(e) {
    document.querySelector('video').webkitRequestFullscreen();
    // SUCCESS
  });