Firefox opens MP4 file in a new tab instead of an HTML video player

Question

I have made an MP4 video player according to this tutorial: http://www.lastrose.com/html5-audio-video-playlist/.

It works well in Chrome and Internet Explorer, but Firefox is opening each link as an MP4 file in a new tab. It plays the first video in the playlist just fine, but when any link in the playlist is clicked, Firefox opens a new tab instead of sending it to the player.

Firefox says:

TypeError: video[0].play is not a function.

I've just changed the audio variable name to video:

function init() {
    current = 0;
    video = $('#video');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    video.volume = .10;
    video[0].play();
    playlist.find('a').click(function (e) {
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, video[0]);
    });
    video[0].addEventListener('ended', function (e) {
        current++;
        if (current == len) {
            current = 0;
            link = playlist.find('a')[0];
        } else {
            link = playlist.find('a')[current];
        }
        run($(link), video[0]);
    });
}

I have found old topics about this, saying that Firefox just can't play MP4 in an HTML video player, but I wonder if that's still the case.

ofrommel ofrommel · Accepted Answer · 2014-07-15T09:30:20

It's quite possible that your Firefox can't play MP4/H.264. You can check here: http://www.quirksmode.org/html5/tests/video.html

Recent versions of FF (26+) do support H.264, though.

Firefox opens MP4 file in a new tab instead of an HTML video player

1 Answers