www.webdeveloper.com
Results 1 to 3 of 3

Thread: Having trouble Embedding a Video..HELP!

  1. #1
    Join Date
    Apr 2013
    Posts
    4

    Having trouble Embedding a Video..HELP!

    Hi guys and gals, I'm new here so bare with me:

    I'm having some trouble embedding 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="900" height="820" autoplay="true">
    <source src="video/video.mp4" type="video/mp4">
    <source src="video/video.ogv" type="video/ogg">
    <source src="video/video.webm" type="video/webm">
    <source src="video/video.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 this is what I added:

    <?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.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,158
    You might have more luck by adding some "AddType" instructions to your .htaccess file.
    Code:
    AddType video/mp4 .mp4
    AddType video/ogg .ogv
    AddType video/x-flv .flv
    AddType video/webm .webm

  3. #3
    Join Date
    Apr 2013
    Posts
    4
    Thanks for the reply. Appreciate the effort to help.

    I was able to solve the problem and here's what I did for the web.config:

    1.) web.config is for Windows servers (.htacess for Linux servers). Only use web.config if your server is a Windows server, and it must be saved with no extensions (no xml, txt. etc.). Once you upload it, the server will automatically know that it is a CONFIG file.

    Here is what I did to write the entire CONFIG file (web.config):

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

    ---

    Here's what's going on in the above code:

    Between the "staticContent" tag... is where you can remove and add new MIME types.

    See this: <remove fileExtension=".mp4" />

    The above code removes the file extension that was there as a default mp4 file type the server had preconfigured that was not compatible for my mp4 h.264 video format. It was an "audio" version of the mp4 format, and it didn't really quite work well especially for IE9 browser for whatever reason. Check your server to see what type of mp4 format the server handles.....

    Underneath that code is the new mp4 MIME type you want to replace the old mp4 format with. The server is dumb.... so you have to tell it to take away (remove) the old format that currently exists already and replace it with that new one. It won't just do an override automatically (as I had thought), so that's why that <remove...> tag is absolutely necessary.

    Below that is the two new MIME types I added that was NOT on the server MIME type list (which I found very odd):

    <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
    <mimeMap fileExtension=".webm" mimeType="video/webm" />

    So in other words, you can add as much new MIME file types as long as it's NOT currently existing on the server, so you have to see what's there first. If it is but it's somehow a different version of the file format that's needed (like the mp4 audio one I mentioned)...you MUST use that <remove fileExt.....> tag first, then add the new MIME type right underneath it.

    Then all the closing tags should follow as seen in the sample above.... That's it.

    Note: Sometimes the <system.webServer> tag works as <system.web> for certain server config setup but for me <system.web> tag didn't work. So try it out each one to see which one works and which one doesn't.

    As for my CSS/HTML to actually embed the video (which works just fine for me):

    <video id="movie" 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" />
    </video>

    Please note...that my video has no controls as it's invisible since I took out the controls="true" in the upper <video...> tag. To add back controls just add that code.

    And you don't add Flash video using the video tag as I understand... you must still use the <object> tag to embed that flash file, which I don't have demonstrated here as I'm just using three types (mp4, ogg, webm).

    I hope this helps someone who can't seem to get the video to show up right on the web as it could be a server side issue, not necessarily your css/html.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles