video event listener not firing on mobile-CodePudding

Simply trying to redirect after video finishes, works great on all browsers except mobile chrome and safari. Doesn't seem to catch the event, what am I missing?

function playVideo(){

var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
    window.location = 'appt.html';
});
 
}

<video controls id="video"  width="100%" onclick="playVideo()">
<source src="./advisors/intro.mp4" type="video/mp4" />

CodePudding user response：

Turns out the fix was to simply remove the "controls" attribute from "video" element.

CodePudding user response：

Because your onclick function does not firing on touch devices

function playVideo() {

  var video = document.getElementById('video');
  video.play();
  video.addEventListener('ended', function() {
    window.location = 'appt.html';
  });

}
document.getElementById('video').addEventListener("canplay", playVideo)

<video controls id="video" width="100%">
<source src="./advisors/intro.mp4" type="video/mp4" />