CODEWITHSUNDEEP
javascripthtmlfirefoxhtml5-video
Saleh Ahmad Oyon
Saleh Ahmad Oyon

Reputation: 672

HTML5 video in not supported on my Firefox but works elsewhere

I am using HTML5 <video> tag with MP4 video in my project. When I tested it, it only works on Chrome but not on Firefox or IE. When I tried laptops of my friends, only one out of five had the same issue as mine, for everybody else the video runs well in Chrome, Firefox and IE. I wonder what it causing this behavior. It's Firefox 46.0.1 on all computers. Here is my HTML code:

<video id="video1" width="100%" height="auto" controls>
    <source src="the-mountain.MP4" type="video/mp4">
</video>

How do I solve this issue? The project has to be compatible with at least Chrome, Firefox and IE > 9.

Upvotes: 1

Views: 1510

Answers (3)

nmaier
nmaier

Reputation: 33202

The codecs used in MP4 containers, H.264 (video) and AAC (audio), are patent-covered, therefore mozilla decided not to implement these codecs in Firefox itself but rather rely on support from the OS or device hardware. In case of H264, there is also the OpenH264 plugin which Firefox may install itself.

You mentioned in the comments that you're using Windows 10 Pro N, so the Windows version that comes without the codecs Firefox would normally use on Windows. Hence no playback. OpenH264 may enable you to play H.264 in MP4 files, but you'd be still missing an AAC decoder for audio.

The Knowledge base article also links to a download that will allow you to make your N Edition into a "full" edition, however, this will only fix the issue for you, but not for other Windows N Edition users on Firefox.

To support such users, you will have to provide a webm version (additional <source>).

Upvotes: 2

just95
just95

Reputation: 1099

The problem is that MPEG is not a free format.

Microsoft, Apple and Google own a licence allowing them to natively support the format in their browsers. Firefox however is an open source project and is not paying the MPEG LA. Thus the support of MPEG video depends on the presence of third-party decoders. (Source)

Installing the QuickTime plugin might solve this issue.

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133400

You can check if you video in support using caniuse http://caniuse.com/#feat=video and for subfeature you can check

http://caniuse.com/#feat=webm ,

http://caniuse.com/#feat=mpeg4 ,

http://caniuse.com/#feat=ogv ,

http://caniuse.com/#feat=webvtt

For MP4 the version supported is from FF45 with this spec

Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed.

Partial support for older Firefox versions refers to the lack of support in OS X & some non-Android Linux platforms.

And just a minor suggestion form FF doc Try use pixel for width and height https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

height

The height of the video's display area, in CSS pixels. width

The width of the video's display area, in CSS pixels.

Upvotes: 0

Related Questions