MP4-video playing on Nexus 7 Firefox does not work with HTML5

Question

I have a problem with playing a video on a Nexus 7 with Firefox 27. I want to play this with the HTML5 video-Tag. So in my code there is:

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="480" height="320"  poster="media/spardabank.jpg"    data-setup="{}">
   <source src="SpardaBankHD.mp4" type='video/mp4' />
   <source src="SpardaBankHD.webm" type='video/webm' />
   <source src="SpardaBankHD.ogv" type='video/ogg' />
</video>

When I play the video with Opera or Chrome, all work fine. But Firefox only plays the sound and not the video, so the screen is black after starting the video.

The videos have this properties:

MP4:
- Width: 480 Pixel
- Height: 320 Pixel
- Frames per second: 24
- Datarate: 996 kBit/s
- Bitrate: 1149 kBit/s
- Video-Codec: x264
Webm:
- Width: 480 Pixel
- Height: 320 Pixel
- Frames per second: 24
- Video-Codec: VP8
- Datarate: 996 kBit/s
- Bitrate: 1149 kBit/s
Ogg:
- Height: 480 Pixel
- Höhe: 320 Pixel
- Frames per second: 24
- Datarate: 996 kBit/s
- Bitrate: 1149 kBit/s
- Video-Codec: libtheora

On all other browsers (Safari, Opera, Chrome) all works good (on mobile devices and desktop pcs). I think the problem is not the Nexus 7, but Firefox, isn't it?

Does anyone have a clue?

King regards, Wuz

Abbas Arif Abbas Arif · Accepted Answer · 2014-09-12T09:58:06

yet i'm not sure why android firefox does this but simply changing order of video's will work. Just use webm first then other formats.

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="480" height="320"  poster="media/spardabank.jpg"    data-setup="{}">
   <source src="SpardaBankHD.webm" type='video/webm' />
   <source src="SpardaBankHD.mp4" type='video/mp4' />
   <source src="SpardaBankHD.ogv" type='video/ogg' />
</video>

MP4-video playing on Nexus 7 Firefox does not work with HTML5

1 Answers