CODEWITHSUNDEEP
htmlapachevideocross-browserhtml5-video
karancan
karancan

Reputation: 2162

Inconsistent behaviour of HTML 5 video across desktop browsers

Someone I know has asked that I convert the videos on his webpage from using FlowPlayer to using native HTML 5 video.

To start off, I read that 3 formats are sufficient to cover the main desktop browsers (Chrome, Firefox, IE and Opera). Starting from .avi, I used Miro Video Converter to get videos in .mp4, .ogg and .webm as can be seen here:

enter image description here

To further help with cross-compatibility, I decided to use VideoJS.

The mark up seemed straightforward too:

<video id="example_video_1" class="video-js vjs-default-skin"
       controls preload="auto" width="500px" height="300px"
       poster="something.png">
   <source src="something.mp4" type="video/mp4" />
   <source src="something.webm" type="video/webm" />
   <source src="something.ogv" type="video/ogg" />
</video>

Here was what I found on the browsers (latest versions of all):

I then did some reading up on Apache. The headers stated that Firefox and IE were both recognizing the mp4 as just that as opposed to some other MIME type. Even so, I added the following to my .htaccess:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

That didn't make a difference.

I then swapped the order of the source tags so that the .ogv video came first. Now, the video played in Firefox too but the .ogv is not nearly as high quality as the .mp4.

The page in question is this: http://keyrecords.com/Artist%20Pages/haggard.html

I am linking to the page above for illustration purposes only. On the page above, .ogv comes first, so yes, I know it plays in Firefox.

So my question is this: what do I need to do to get Firefox and IE 10/11 to play the .mp4? It is safe to assume that these are the latest version of each of the browsers running Windows 7/8 machines.

EDIT: MediaInfo gave me this information about the file (does it look right?):

enter image description here

Upvotes: 0

Views: 1405

Answers (1)

karancan
karancan

Reputation: 2162

I managed to solve the issue by using the HandBrake converter.

I gave it the existing .mp4 and asked it to give me a new .mp4 with the following specs:

enter image description here enter image description here

This new .mp4 works in all 4 browsers without issues :)

Something about the way Miro Video converter converted the files caused IE and Firefox to see the audio track only but not the video track. This was rectified by reconverting using HandBrake converter.

Upvotes: 1

Related Questions