IE9 HTML5视频“播放”事件在第二次播放时未触发

Question

I've built simple HTML5 video player. I'm having trouble with the "play" event not being fired in IE9. Have a look at the Fiddle .

The player has a big play button visible before playback, hidden while playing, visible when video completes.

Below are the three listeners I'm using.

btn.addEventListener("click", function() {
    vid.play();
});

vid.addEventListener("play", function() {
    btn.style.display = "none";
    alert("'play' event fired");
});

vid.addEventListener("ended", function() {
    btn.style.display = "block";
});

In IE9 the "play" event isn't being fired for the second and subsequent times the video is played through.

I'm guessing it's either something I don't understand about the "play" HTML5 video event, or some kind of bug in IE9.

Any help is greatly appreciated.

Answer 1

An assumption:: I think paused event remains false even when your video ends, so may be try explicitly setting pause once your video ends, as:

btn.addEventListener("click", function() {
    vid.play();
});

vid.addEventListener("play", function() {
    btn.style.display = "none";
    alert("'play' event fired");
});

vid.addEventListener("ended", function() {
    if( !this.paused ) this.pause();
    btn.style.display = "block";
});