Izzy Video 132 – How to Embed High Quality Videos in Your Website [Members Show]
For many years, nearly all the videos you’ve seen embedded on my website have been Quicktime videos in file formats such as MP4, MOV, and M4V. I’ve used Quicktime embed code on occasion, but usually I simply link to the video files so you can click on them and watch them in your browser. I did this even when most other websites embedded Flash video files, and clearly Flash was becoming the new standard.
My reason for this has been that I’ve much preferred the quality of Quicktime files over the quality of Flash files. To my eyes, Flash videos were unbearably low quality and difficult to watch. And one of the biggest problems has been the video-sharing services like YouTube. When you upload a video to their service, they control the transcoding process, so you give up your control over quality.
Everything has recently changed. My concerns are gone because Flash now has the ability to play videos encoded with the H.264 codec. This is huge! H.264 gives you the ability to produce high quality videos with a relatively low file size. This codec is the one I use with all of the videos I distribute over the web.
In this week’s installment of Izzy Video, I demonstrate how to create a high quality FLV file (which is a Flash file format that’s excellent for playing on the web). I also demonstrate how to embed it into your website. If you’ve been wanting to embed high quality videos in your website, this episode is a must-see.
Update: I should have mentioned in the video that Don Wigington from www.epikos.net told me about the very useful trick of changing the file extension from MP4 to FLV. Thanks, Don, for the pointer!
This week’s tutorial is available to Izzy Video Members only.
Become an Izzy Video Member
Izzy Video Members get access to full versions of the show in HD and iPod resolutions. Please follow this link for more details on becoming an Izzy Video Member.
Want to see the trailer and all the other free tutorials?
Subscribe to the free version of Izzy Video in iTunes, and have this trailer plus future free tutorials and trailers delivered to your computer by clicking on the following link:
Free Izzy Video Tutorials in iTunes
You can download the Quicktime version of the trailer here.
May 14th, 2009 at 11:45 pm
I just love your new video. And when you tell us that really cool tip on changing the mp4 format to the flv format, I especially like to way you tell us how you finally “figured it out”. As I told you before, your a real genius.
May 15th, 2009 at 12:44 am
Sorry, Don! I pick up new information all the time, and forget sometimes to tell everyone where I received it from. I’m going to update the post right now and give you credit. Thanks for the friendly reminder…or at least I hope it’s friendly. I’m reading it that way.
May 15th, 2009 at 12:13 pm
Quick note… while changing the extension on an mp4 file to flv will work for the flash player, you won’t be able to open that file in quicktime again without changing it back to mp4. Which is fine for the most part, but if you’re doing a podcast it just makes for more hassle to have two copies of the file.
The flash player doesn’t really pay attention all that much to the extension. You could name it movie.wth and flash could still play it… as long as your web player knows to associate the .wth extension with flash. But if its an .flv vid then its probably encoded with VP6 as opposed to h.264. The best solution I’ve found is to tweak the code for whatever player you’re using (seems like its usually a javascript file of some sort) and add mp4 to the list of extensions that open with flash and remove it from the list for quicktime. Now your quicktime and flash compatible mp4 should play in itunes, ipods, websites, etc… The same trick should work for .m4v as well. Saves a lot of time and hassle.
May 20th, 2009 at 12:14 am
Tim, I agree that QT won’t open the newly renamed FLV file, but you would not do that for a podcast so the point is mute. The only reason to do that is to embed in a website (as the title of THIS podcast states). And the reason to do it is because while the newer version of Flash can play H.264, the older versions can’t, thus the whole point of the .mp4 to .flv extension trick.
And Izzy, just some good natured ribbing. I think you’re great.
Don
May 20th, 2009 at 8:03 am
My previous post might not have been very clear… I tend to ramble
. Flash has had h.264 support for close to a year and half now. They started supporting it in Fall of 2007, and their adoption rate is much better than qt or windows media as they like to let people know. So most people should have an h264 compatible version.
“And the reason to do it is because while the newer version of Flash can play H.264, the older versions can’t, thus the whole point of the .mp4 to .flv extension trick.” Not sure what you mean by this Don? Just renaming the extension to flv doesn’t change the fact that the video is still h264 so older versions (pre 9.0.whatever) still won’t be able to play it.
The point I was trying to make is that since flash supports h264 now and will pretty much play anything encoded in quicktime, then it makes sense to keep the video as an mp4. If you change the settings for your web player you can tell it to play an mp4 with the flash player as opposed to quicktime. Then you won’t need to rename your video to an flv… thereby “breaking” it for quicktime. Its more of a best practices kind of thing.
And my thinking was if you have a podcast AS WELL as want the video embedded in your site then why not link both to the same video file? Save on storage, upload time, and an extra level of disorganization. An example in action…
http://www.newmusicmonday.com/wp/2009/04/100-000-huzzah/
Hopefully that helped clarify what I was trying to say originally.
May 20th, 2009 at 8:17 am
Tim and Don,
Thanks for the clarification from both of you. You know it’s funny because I knew that Flash Players could play MP4 files as well, so I tried this first, using Tim’s logic that it’s easier NOT to have to have two different versions of the file. For some strange reason it didn’t work with the version of the player I use through Dreamhost. It’s a known problem they have on their wiki, so instead of using one file for everything, I’m left with FLV’s for now. When they upgrade/fix their Flash player, I’ll finally be able to have one player do everything.
I’m looking forward to that.
Thanks again for all the tips, guys!
And Don, I’m relieved to hear it’s friendly banter. I thought it probably was, but it’s hard to tell in written form sometimes.
May 20th, 2009 at 8:28 am
Izzy,
and it WOULD NOT play the same exact file that was H.264 and .mp4 extension, but WOULD when I changed the extension to .flv.
I as well tried the older version of Flash (I think it was
This is the reason sites like Hulu use flash for most of their content because they want to reach people with the older players. They use H.264 encoding for the HD shows, where they feel that those who want to watch this content will invest the time to get the latest players.
This is great discussion. Keep up the good work.
May 20th, 2009 at 7:37 pm
Don-
Changing the extension from .mp4 to .flv doesn’t change the actual content of the video. Its still h264. The question isn’t so much can flash play an h264 encoded mp4, but more of how do you tell the computer to play an mp4 with flash instead of quicktime.
Izzy-
You might take a look at the SFV plugin for wordpress. Its setup out of the box to play mp4s with flash.
http://www.simplethoughtproductions.com/sfv-plugin/
Another good option that I prefer is the Shadowbox plugin but you’ll have to do a little tweaking and I don’t think it supports a direct embed.
http://wordpress.org/extend/plugins/shadowbox-js/
May 25th, 2009 at 5:18 pm
So, if I have a video which I want to hide behind a subscription wall can I still just upload a quicktime file and then link to it? Can’t non-subscribers just right click and download?
I’d like to be able to embed a video on a page which only paying members can access. How do I go about doing something like this?
Thanks!
May 25th, 2009 at 5:35 pm
Shailesh,
I imagine it would work the same way, but you’d need to put the video file itself in a folder that only paying members can access. If the whole page is for members-only, then it would be even easier because the whole page could be in the protected folder. I use Amember for this type of functionality. If you’re using it too, then it should be pretty easy for you.
Good luck!
Izzy