HTML5 video play button not working in Firefox

问题

When I click the play button, it just goes to the end of the timeline. But if you drag the ticker somewhere in the middle (or anywhere really) it plays the video. So why won't it play initially?

It works in every other browser other than firefox. Im using Firefox 17 I appreciate the help. Thanks.

heres the link http://www.lonestarveincenter.com/

回答1:

Sorry for the necromancy but I found the answer to this problem.

The reason why your onClick() event isn't working is because Firefox has it's own onCLick event added to each video element hence whenever you click the video the video starts playing then instantly stops.

function playPause() {
  'Before this event is fired the FF onClick event is fired'
  player = document.getElementById("PlayerID")
    var playBtn = document.getElementById('<%= img.ClientID %>');
    if (!player.paused) { 'Player is playing and will go through this code block'
      playBtn.setAttribute('Style', 'display: block;');
      player.pause();
    }

    else { 'Player is playing and will skip this code block'
      playBtn.setAttribute('Style', 'display: none;');
      player.play();
    }
  } 

回答2:

One very quick test of changing the <source>'s of your video to those on the HTML5 Video site by W3 School's http://www.w3schools.com/html/html5_video.asp shows the desired behaviour: click play and the video starts from the beginning.

I suggest you try re-encoding your video, and testing locally. How are you encoding at the moment?

回答3:

I was having the exact same issue. I was using WebM video, and it would play fine - after you picked a spot on the timeline. I converted to .ogv, put it as the first option in the HTML above WebM and mp4, and it is working great in Firefox, and all the other major browsers.

来源：https://stackoverflow.com/questions/13534078/html5-video-play-button-not-working-in-firefox