How to add video into a webpage for mobile web browsers.

Question

Our company is making a mobile version of our website. We have several product videos we want to show on the mobile version.

When I try to use

<a href="video.wmv">video</a> 

I get sound playing but a black screen on my htc incredible android os phone.

I'm thinking that the video is playing but in a different browser window. I need it to display all in one window without having to switch to a different window.

I tried the html embed tags and get no video or sound at all, from what I've read these tags are not very realiable cross browser.

I also just tried the html5 video tags below. I get an icon identifying that it's a video file but it doesn't play.

<video src="video.wmv" controls="controls">
      your browser does not support the video tag
</video>

Is there a special format the video file needs to be in? Should I be using the href or embed tags, what other options do I have?

If it helps to know, I'm using the mobile doctype on my webpages.

Thanks

Answer 1

The video format you need to send to the browser varies by browser. Firefox supports Ogg Theora, everybody else seems to support H.264 in an MPEG-4 container (MP4 file.)

See here for an example: http://html5demos.com/two-videos

In any case, WMV won't work.

Answer 2

Android doesn't support the WMV format normally. Here is a list of the supported formats:

http://developer.android.com/guide/appendix/media-formats.html

If iPhone/blackberry/etc don't have a format in common, you may need some javascript magic based on the user-agent to choose which file to embed.

Answer 3

I've found a simple solution to my problem. YouTube. Upload videos on youtube that need to play on your mobile web site and they work. PERIOD.

No fuss! Just copy the embedded URL from the YouTube video page to your mobile page and your all set to go.

I'm not exactly sure how YouTube makes the videos compatible.I'm guessing when uploading the video it's automatically converted into several formats so that the right codec / container is played based on what smart phone is accessing the page.

This list is not extensive and I'll probably think of more later, but comment if you can think of any more advantages or disadvantages of using YouTube for mobile videos.

Advantages:

++ YouTube is universally accepted amongst most major smart phones (therefore your video should play!).

+ If you have limited bandwidth you don't need to worry about wasting any bandwidth of your own.

++ Easy to setup, little to no configuration (setting video resolution). It just works! (encapsulation...)

Disadvantages:

- YouTube symbol during video play back

- It's not hosted on your hosting service. May not be tracked by some analytic services. (requires custom tracking? onclick java-script event?)

- YouTube bandwidth may not be acceptable for smooth replay? (although from initial video viewing bandwidth seems acceptable (minimal buffering...), but not confirmed...). Probably mostly dependent on the cell phone 3g / 4g connection quality.

- limited video file size / resolutions? shouldn't be a problem because you'll want a lower quality video for smart phones.

I would like to know exactly how YouTube make it's videos compatible with smart phones so if necessary I could host the videos myself, but for now this seems to be the best choice.