HTML5 video typically requires multiple file types for various browsers & web devices (ogg, webm, mp4 and flv fallback for mozilla browsers). This can be quiet tedious and requires extra bandwidth to support the various files.
If you don't want to mess with this, look at Pickle Player. It supports all web devices/browsers with one file type and can be configured to support playlists with video, audio and poster frames.
Pickle Player does fix this.
But for those who are interested in "Manual Labor" here's what you put into your .htaccess file on your server:
AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
AddHandler application-ogg .ogg .ogv .oga
Some servers will let you add MIME types through their Control Panels, but this is really fast through Dreamweaver if you download the file, add these lines of code and then upload it. Some versions of Dreamweaver don't know what to do with the file, but you can right-click and do an "Open with>Dreamweaver" to get it done.
Here is a page that has all of the types of video that will work with all browsers. It's HTML5, so the <video> tag works. I use Miro Video Converter (for OS X) and Quicktime Pro to do the transcode to the various file types that are supported in HTML5. If you look at the code, you'll see .mp4, .ogv and .webm (VP8) are all called within the code.
First time I did this, I couldn't figure out why the video did not play in FireFox. And I think that Mozilla.org is very smart to insist on a codec that simply will never be proprietary. I got in touch with the Mozilla people and they are the ones who told me that I didn't have my server set up to serve that MIME type as a binary stream (and not an ASCII file).
That is, essentially what you are doing when you add the MIME type. The file will be downloaded as an ASCII (text) file if you don't tell your server it's binary.
thanks for all your suggestions, but as a novice user I'm scared to alter something that partly works for some browsers and devices if not all. And I do not want to risk mucking it up now or paying for pickle yet. Is the above htaccess coding meant to copied and pasted in literally? I am not clear whether the 'addtype'' bits are meant for me to add information I don't know what I'm doing......if it's just a copy and paste job into a file/folder on the server I might manage that. I would need a code listing for Safari, Firefox and maybe google chrome, but so far my video works for chrome, safari and ipad, and another one embedded from facebook for the firefox.
I have Miro video converter, I made the ogv file and webm files, I just found it all too scary and it will then triple my server space usage. So embedding seemed an easier way to go. Even so the facebook embed plays ok on firefox but doesn't play on the ipad (whilst my mpeg4 coding still works fine on ipad.....so I don't get that, it prompted flash which ipad doesn't use......so I just left it and got a bit fed up! Confusingly the video on my facebook page plays fine on normal facebook app on the ipad, just not on embed link.
Firstly, relax. Test your pages first on your own computer with Firefox, Chrome and Safari. If It works in Safari, it will work with iPad, unless it is Flash -- and Miro can target iPad/iPhone.
With respect to .htaccess, yes. Insert those lines below any other lines in your .htaccess file. Then upload it to the server.
Go to the page I linked in my last message. Tell your browser to show you the sourcecode -- there is NOT a lot of stuff on that page, so you will find the tag easily.
Copy everything I have done, but refer to the actual filenames of your videos.
I do realize you are trebling your storage requirements, but I don't think that should be significant -- if you are using a hosting company that limits your storage, then you need to find a new one.
If you copy my code and add your own .JPG file for a still picture and it should work.
"A discriminating irreverence is the creator and protector of human liberty."
- Mark Twain
<video width="640" height="480" controls preload="metadata" poster="GONERS-movie-poster.jpg">
<source src="myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> (what is the codec avc1.42E01E all about can I ignore this)
<source src="myvideo.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
this is your source code for your video, I've replaced your file names with an example file name is this how you want it?.
I tried this type of source add under adobe's own tutorial for ogv files and as I say it didn't work perfectly, I lost the sound on the mpeg 4 file that previously worked, so I reverted back, I now have two videos on the page for several browers.
The htaccess file pops up several times in my server files, and it's not a folder, it's a little white file, so I don't know how anything under it would know what to do and which one to use. The more obvious one is the one under my main 'Public' folder. But as I can't work out how to see any other folders above Public I can't see if it should be further up a longer list. I recall once there were many more folder and files above 'Public' but as ever I can't see any way of viewing them, nothing is obvious.
where exactly does the video name go here? I'm very confused as to why this differs from your sourcecode above.
e.g myvideo/ogg .ogv
AddType application/ogg .ogg what application 'Firefox' how is this written?
AddHandler application-ogg .ogg .ogv .oga don't know what you mean here....dreamweaver/firefox?
Your very kind to bother, but I'm not going to alter anything in case it mucks up what I've done which partly works. And I don't fully understand enough to risk it yet. I would like to find the other files above though which would be nice. thank you again.
I've had a look at this and typed in the source info and it does play on firefox but only from my facebook embed video, and not the top video which is coded as mpeg4 and now a webm file which looked like a good idea from the above link by Mozilla. But still the first of my video code plays only for my ipad and safari/chrome and not for firefox only the facebook embed. So I could go on listing multiple file types and their sources and Firefox would never get it. Ican't see any earlier folders to put any pickle files in yet, so that will have to wait. thanks for all your help tho.
1 person found this helpful
The reason why Firefox is not playing back the video is because Firefox will not play .mp4 or .m4v files. According to Mozilla, these file formats may not be supportable in the future because the Mozilla Foundation may need to pay a licensing fee for support.
The ONLY file types that Firefox will play back are .webm (vp8) and ogg with the Theora video codec and the Vorbis audio codec. That's it. This is why I place .mp4, then .ogv, then .webm in that order in my code and then upload all three. For Mozilla support you need to read their requirements to understand why. I think you could get away with just .mp4 and .webm, but I include .ogv just in case someone has an outdated browser.
Where is your website? Give me a link and I will try to figure this out for you.
I've just uploaded and coded a webm file into the page and it still didn't play it, but there's probably some minute code I haven't put in, thank goodness for facebook embeds. I didn't bother coding in the ogv as it didn't work before either, so I just went for webm in the end.
But I'm not taking out the embed until I can see my ipad still plays the sound. I uploaded a flash file to the facebook embed and that plays on firefox, but not on the ipad but it doesn't matter cos of the mpeg4 file is fine.
Vanessa, Firefox is confirming that you do not have your server set up to play the .ogv file with the following:
So you need to edit your .htaccesss file just as I descried above, and make sure that you have the .ogv file uploaded to your server.
I do realize it's a blank piece of paper icon, but you can right-click on that file and open it with Dreamweaver. You can also have your compter always associate .htaccess files with Dreamweaver if that suits you.
Add he lines from my repliy above to the bottom of your document and you will be able to play the video in Firefox.
I've just added the htaccess code suggested that was fine, just pasted in the text literally as you've shown underneath the rest of the text. But when I entered the additional source line for the ogv file, based on the sources already there as you can see, again it lost the sound on the ipad, but interestingly Firefox for a second showed a play icon in the black box and then reverted to the 'not supported MIME bla..' but I think I'm a bit closer, but until it can work perfectly I had to put everything back as before. it always plays in the browser when testing but never on the real web. Here's the code so far, the source file ogv is ready on my remote server under my public folder ready to code in but it won't work.... (as is webm and mp4 of course on server). I'm not sure the webm makes any contribution as only the two videos show the mpeg4 and embed from facebook.
<video src="2007murdermadesimple.mp4" width=" 480" height="272" controls>
(I originally added the ogv source info on this line same code with .ogv). I've now closed the gap again after it didn't work.
<video src="2007murdermadesimple.webmsd.webm" width="480" height="272" controls>
<iframe src="http://www.facebook.com/video/embed?video_id=10151482187407410" width="480" height="272" frameborder="0"></iframe>
ps the htaccess file I edited was under my public folder, but I cannot see where the rest of the site folders are as only the public one makes any changes live. I'm I saw some other lists of files above before....but I can't see how to see them, I just have the split remote server and local files columns.
I'm wondering whether I should be putting another div id between each file source line....not sure. Anyway I've added the htaccess paste in to the white file fine, it made a tiny difference for a second......progress! I didn't upload at the same time, I've uploaded them one by one, but surely that doesn't make any difference?
I might have the cause of your audio problem here, if your iPad is using an earlier version of iOS. From this article, Note: Prior to iOS 4.0, iPhone and iPod touch did not play audio inline. Audio was presented in full-screen mode. Audio plays inline on iOS 4.0 and later, on all devices.
Also, when you encoded your .MP4 file (which is what iOS devices will want to play) you should be aware of the following:
Safari on iOS (including iPad) currently supports uncompressed WAV and AIF audio, MP3 audio, and AAC-LC or HE-AAC audio. HE-AAC is the preferred format.
Safari on iOS (including iPad) currently supports MPEG-4 video (Baseline profile) and QuickTime movies encoded with H.264 video (Baseline profile) and one of the supported audio types.
iPad and iPhone 3G and later support H.264 Baseline profile 3.1. Earlier versions of iPhone support H.264 Baseline profile 3.0.
So double-check your encoding process when you are making your initial files.
I finally found an all answer with uploading it to vimeo and found if I set that to html5 all worked fine on firefox and ipads/safari etc.... for now it's an easier solution. But one day I'd prefer an onsite solution which is do-able for occasional user. Thanks for your advice though I've learned a lot!