Embedding Video for cross browser support

[1devlady]

Hello there, I'm new here...

I've been trying to embed a video on a site and so far this is how my testing has gone:

1.) It works on my local server for these browsers: Safari, Chrome, Firefox.... Except for IE9
2.) On a remote server (Godady/Windows server running IIS 7.0)... the video works good with Safari ...but none of the other browsers.

Here is my css/html code:

<video width="880" height="720" autoplay="true">
<source src="_video/myvid.mp4" type="video/mp4">
<source src="_video/myvid.ogv" type="video/ogg">
<source src="_video/myvid.webm" type="video/webm">
<source src="_video/myvid_2.flv" type="video/x-flv">
</video>

I recognized that some of the file types were not recognized as I saw an error message saying this, so I figured I needed to add new MIME types as I didn't see ogg, webm, mp4 video (just mp4 audio) on the list.

Godaddy doesn't seem to have an editable web.config file (which they confirmed), so I attempted to create one as they suggested. I saved it as web.config.xml (is this right?),
and added the MIME types needed like this:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".flv" mimeType="video/x-flv" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
</staticContent>
</system.webServer>
</configuration>

But I'm still not getting video for the other browsers, except for Safari even with the web.config additions.

Can anyone see anything wrong with my code? Or better yet, add suggestions that they've used that worked? Any clues would help.

Note: I saved the mp4 as an h.264 compressed file, as some browser can only handle this type for the mp4. Do I need additional code to make this work on Firefox, Chrome, IE?

Thanks in advance for your help.

 

[spamjim]

I was going to point out an oddity in your HTML but it looks like you've got it now.

http://www.webdeveloper.com/forum/showthread.php?277177-Having-trouble-Embedding-a-Video..HELP!

 

[darryncooke]

So you are relying on the users video player to kick in and play the movie in the browser? Why would you (or anyone) for that matter rely on;

1. Your server to host up the video file
2. Rely on your visitor's system player to run the file

I always recommend Vimeo or Youtube (or an already developed, tested and supported player/service). You get the same functionality with simpler code, less bugs to fix, a more universal technology that works cross browser and is constantly supported and tested to improve, and most importantly they handle the bandwidth and compressing/processing of the video files.

In my experience serving up video files as you are crashes more browsers than people actually getting to watch the video. So it depends what your usage is, test/hey I did it, or actual usability and actual content consumption.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[1DMF]

You might want to have a look at jPlayer :

http://www.jplayer.org/

I use it for audio and it works well.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads