Installing multiple web video formats on your web site
This is going to be a technical post. I'm mainly doing this in case anybody else out there in cyberspace struggled as much as I did, and to keep a record for myself.
First, the procedure, Details and background to come after.
If you have access to a web host server, and you want your videos to be viewable to all computer browsers and mobile phones, you have to create several versions of the video and code them in to your web page, as well as make a configuration file for your host server.
Say you have an AVI. Let's call it myvideo.avi. You want to put it on your web page, but you want it to stream and be viewable to as many browsers, platforms, and mobile devices as possible.
1. Make it into a flash video for older browsers and IE.
You can use Flash to make a .swf and .flv to upload to your host server. Otherwise, you can use Any Video Converter..
2. Make it into an MPEG and optimize it for iPhone.
Any Video Converter can do this, but this excellent article on web video explains how to do it with Handbrake.
3. Make it a .ogg and/or .webm video for everything else.
This is done with these handy online video converters.
Convert video to OGG Theora for .ogg videos
Free Online WebM/VP8 converter for .wemb videos
4. Put this line in as your very first line of your HTML.
5. Put a video tag in your HTML where the video would be inserted.
You can also put autoplay or controls in the brackets depending on if you want the video to start playing, or if you want to give the web visitor a control panel. The default shows no controls.
6. Put the videos and their formats in source tags inside the video tags, including their video and audio codecs.
Note: You may notice that some of your video extensions may be a letter or two different from the formats in the type parameters. You might have myvideo.m4v and myvideo.ogv, while their types are actually mp4 and ogg. This is fine. Do not change the types. You will suffer as I did.
7. Put in the code for the Flash video.
I got away with leaving out the ogg line. I think.
8. Make a .htaccess file and put it in the same directory as your index.html.
This gets your server to add these MIME types. You have to do this or the server won't show anything, even though everything works fine on your own computer. Just go into Notepad and put in these lines:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Save it as .htaccess. It goes in the same folder as your index.html file. When I uploaded it with my FTP tool, it didn't show up on the host server's list, so I guess it's actually a hidden file.
You're done! You may now thank me for helping you avoid all these headaches.
What started all this?
I was working on a friend's web site, and he wanted the videos to not be Flash, but something IPhones can support instead. I made them into .m4v files, which are web-optimized versions of .mp4 videos. Worked fine on the iPhone, and worked for PC browsers like IE and Firefox as well. Since they weren't streaming videos like Flash, they took a while to load, but that's what Apple demands. Bastards.
I found out later that Androids couldn't view the videos. The reason why is because Google understandably doesn't want to pay royalties to Apple. Furthermore, Google and other web programmers have been developing other HD video formats like .ogg and .webm (along with HTML5) to avoid paying royalties. This wikipedia article explains all the sordid details.
After much research and filtering through programmer speak, I finally got the videos to work across the board. I rock.
I don't understand why Apple thinks they can get away with being so elitist and arrogant. This kind of thinking almost drove them into bankruptcy before, when they thought their Macs were the only computers worth buying. Microsoft found ways to avoid the royalty blood drain, and made their substitutions free to the public. Result: public bought the cheaper PCs and Apple got stuck with their elitist thumbs up their asses. Now Google and open source programmers are doing the same thing with web videos, and Apple is sucking as much royalty exploitation as they can until they're forced to compromise. Bastards.
First, the procedure, Details and background to come after.
If you have access to a web host server, and you want your videos to be viewable to all computer browsers and mobile phones, you have to create several versions of the video and code them in to your web page, as well as make a configuration file for your host server.
Say you have an AVI. Let's call it myvideo.avi. You want to put it on your web page, but you want it to stream and be viewable to as many browsers, platforms, and mobile devices as possible.
1. Make it into a flash video for older browsers and IE.
You can use Flash to make a .swf and .flv to upload to your host server. Otherwise, you can use Any Video Converter..
2. Make it into an MPEG and optimize it for iPhone.
Any Video Converter can do this, but this excellent article on web video explains how to do it with Handbrake.
3. Make it a .ogg and/or .webm video for everything else.
This is done with these handy online video converters.
Convert video to OGG Theora for .ogg videos
Free Online WebM/VP8 converter for .wemb videos
4. Put this line in as your very first line of your HTML.
5. Put a video tag in your HTML where the video would be inserted.
You can also put autoplay or controls in the brackets depending on if you want the video to start playing, or if you want to give the web visitor a control panel. The default shows no controls.
6. Put the videos and their formats in source tags inside the video tags, including their video and audio codecs.
Note: You may notice that some of your video extensions may be a letter or two different from the formats in the type parameters. You might have myvideo.m4v and myvideo.ogv, while their types are actually mp4 and ogg. This is fine. Do not change the types. You will suffer as I did.
7. Put in the code for the Flash video.
I got away with leaving out the ogg line. I think.
8. Make a .htaccess file and put it in the same directory as your index.html.
This gets your server to add these MIME types. You have to do this or the server won't show anything, even though everything works fine on your own computer. Just go into Notepad and put in these lines:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Save it as .htaccess. It goes in the same folder as your index.html file. When I uploaded it with my FTP tool, it didn't show up on the host server's list, so I guess it's actually a hidden file.
You're done! You may now thank me for helping you avoid all these headaches.
What started all this?
I was working on a friend's web site, and he wanted the videos to not be Flash, but something IPhones can support instead. I made them into .m4v files, which are web-optimized versions of .mp4 videos. Worked fine on the iPhone, and worked for PC browsers like IE and Firefox as well. Since they weren't streaming videos like Flash, they took a while to load, but that's what Apple demands. Bastards.
I found out later that Androids couldn't view the videos. The reason why is because Google understandably doesn't want to pay royalties to Apple. Furthermore, Google and other web programmers have been developing other HD video formats like .ogg and .webm (along with HTML5) to avoid paying royalties. This wikipedia article explains all the sordid details.
After much research and filtering through programmer speak, I finally got the videos to work across the board. I rock.
I don't understand why Apple thinks they can get away with being so elitist and arrogant. This kind of thinking almost drove them into bankruptcy before, when they thought their Macs were the only computers worth buying. Microsoft found ways to avoid the royalty blood drain, and made their substitutions free to the public. Result: public bought the cheaper PCs and Apple got stuck with their elitist thumbs up their asses. Now Google and open source programmers are doing the same thing with web videos, and Apple is sucking as much royalty exploitation as they can until they're forced to compromise. Bastards.