FFMPEG Convert HTML 5 Video NOT Working

Question

I am using FFMPEG to convert a video to .mp4, ,ogg, .webm so that it may be viewed in all HTML5 capable browsers using the video tag

Answer 1

I think because I'm still a newbie, I'm not allowed to leave comments? So leaving this as an answer, though I think it's more along the lines of a guess.

Started playing with HTML5 video a week or so ago. I ran into lots of issues that ultimately turned out to be due to the converted movie files I was working with. Here's the code I used for my examples:

I modeled my code after Mark Pilgrim's Dive into HTML (Video) write-up.

A few things I can think of to try:

1) Remove the additional attributes from your tag. I'm less familiar with what you're implementing (onplaying, onpause), but maybe try using just the basics first: width, height and controls. See if this helps.

2) In my tests, I converted my .ogg and .webm versions using Miro. For whatever reason, the movies would seemingly play file locally... but when I viewed them more than once in my browsers, I'd get blank screens. I ended up using Firefogg to ultimately convert my .ogg and .webm versions. It was odd behavior.

Not sure if FFmpeg is a dealbreaker, and something you need to use as part of your workflow. But if you're just looking to get your code and example movies functional and running, Firefogg did the trick for me.

I ultimately realized what the cause was when I swapped out working versions of other movies, instead of my converted ones. I'd recommend you try plugging in the .mp4, .webm and .ogg versions of Big Buck Bunny... and see if you can even get them to display. At least that way, you could isolate whether it's a syntax or conversion issue.

3) Finally, I'd recommend testing out one video file and one browser at a time. This is probably a given, but still worth throwing out there.

Sidenote: once you're good to go with each file type, make sure to list the .mp4 version first. This is from Pilgrim's HTML5 video writeup:

iPads running iOS 3.x had a bug that prevented them from noticing anything but the first video source listed. iOS 4 (a free upgrade for all iPads) fixes this bug. If you want to deliver video to iPad owners who haven’t yet upgraded to iOS 4, you will need to list your MP4 file first, followed by the free video formats.