best format to embed video on site?

**mlegg** · 10-28-2011, 01:52 AM

What do you all think is the best format to embed a video on a website? I have a friends who's site only has Flash. He had no clue and his old web guy didn't tell him that won't work with an iPad for example.

I want to put in a format that would play on any browser whether it be PC or Mac operating systems.

Lastly the page is currently in

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

**djr33** · 10-28-2011, 03:09 AM

Flash actually is the best cross-browser solution for embedding videos. It won't work on any devices that don't have Flash (either because it isn't installed or doesn't exist for that operating system), but it will work for most users, with probably the one major exception of iPhone/iPad users because Apple refuses to work with Adobe to get Flash on the iPhone.

So, you can either abandon Flash entirely and find another way to make the video supported in the other 95% of visitors or you can find a secondary alternative for the iPhones.

One very easily solution is that iPhones have a youtube app; so you could just use youtube if that works for your project. You can embed that in sites as desired and for iPhone users you can link them to it and it will open in their youtube app (outside of the browser).

Or you can give conditional content: Flash if available, or embed using Quicktime. Quicktime is the best option for Apple products (it's an Apple product as well), but that won't work on all systems. I prefer QuickTime to Flash in some ways, but it won't work on all systems, and in terms of popularity, Flash is more widespread so more users can use your site without installing a new plugin.

Using RealPlayer, Windows Media Player or anything else is just a bad idea. They're incredibly limited in what devices they'll work on (more than Flash-- and they don't work on the iPhone either).

There's hope for the future: HTML5 includes a <video> tag that allows you to embed a video directly into the HTML without any plugins required. It's not yet totally supported, but I believe it is supported on the iPhone, starting with iOS 4. Other major browsers also have some limited support. Using that alone at this point is a bad idea, but combining it with Flash is a good idea.

For playing Audio, I think this script is great:
http://www.schillmania.com/projects/soundmanager2/

It checks whether Flash is available and if not tries to use <audio>. It even figures out what formats will (probably) work in the current browser.
You could try to develop something similar for video, although that is a little harder.

Another option you can consider is using a generic format, such as mpeg. MPG at this point is completely outdated and would give you huge files, but basically every player out there (and therefore every device) can play it. This doesn't solve embedding it in the page, but you could use Javascript to detect whether they can play it in other way or another, and if not just give a link to it. On the iPhone, you can click a link to a video file and if the QuickTime system software can play the video, it will play there. So just providing a link might be best in some sense.

Anyway, I recommend using Flash and having a backup link for the visitors who don't/can't have Flash.

Make sure the format you encode the video in is generally compatible. MPG, MP4 and AVI or MOV (with a common codec) are fairly reliable. If you use Flash as well, you may need two versions, FLV (or embedded in your SWF) and the other file. FLV is not very easy to play outside of Flash.

**traq** · 10-28-2011, 03:32 AM

this is a pretty good model for video: it uses the best (native support) first, as available, and falls back on flash in older browsers (and IE), with a hyperlink to download the file as a final fallback.

Originally Posted by http://html5forwebdesigners.com/media/#video

HTML Code:

<video controls width="360" height="240" poster="placeholder.jpg">
  <source src="movie.ogv" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4">
    <param name="movie" value="player.swf?file=movie.mp4">
    <a href="movie.mp4">Download the movie</a>
  </object>
</video>

Thread: best format to embed video on site?

Thread Tools

Search Thread

best format to embed video on site?

The Following User Says Thank You to traq For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions