Internet Explorer Unsupported video type or invalid file path? HTML 5

Report · Mar 01, 2014

Hello.

First I would like to salute all you people out there that answer questions in these forums. Thank you! They have been more helpful than my Web Design class.

Here is my problem. I cannot get Internet Explorer to play my video files. It says Unsupported video type or invalid file path. I have added the .htaccess file for MIME types, and included .mp4, .ogg, and .webm. I have also included a smaller resolution for mobile. Any help or pointers would be appreciated.

Also if anybody could explain to me in an idiot proof way how to add flash support step by step for this site that would be great. I have searched all over the internet, read many tutorials, used the free code makers, and I still cannot get flash to work.

This is my first website, please go easy on me!

Site address is www.mindtrickvp.com

Thanks everybody

Report · Mar 01, 2014

Perhaps an obvious question, but is the Flash plugin installed on the browser you're using? Its not as 'universal' as it used to be?

If you wantt o add flash fallback on a video (this would be only needed if the user was on an old browser and had flash installed) add the following code after the 4 video tags you have so far:

http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html

scroll down to the section "Graceful Degradation" goes over how to add a flash video to the stack.

Report · Mar 02, 2014

I dont understand how the file plays fine when I preview it through IE on Dreamweaver, but when I try to go to the page outside DW it does not work. I added MIME types through htaccess. IS there something else I am missing?

Report · Mar 02, 2014

Hello,

nice to see you, I'll give back your greetings, good luck! To your question:

Did you try out your website in Live view?

Did you try out it without inserting the codecs? Only like this:

<video controls>

<source src="YourVideo.mp4" type='video/mp4' />

<source src="YourVideo.webm" type='video/webm' />

<source src="YourVideo.ogv" type='video/ogg' />

</video>

Hans-Günter

Report · Mar 02, 2014

Also, I removed the codec tags and the videos still act the same. Still unsupporte by IE10.

Report · Mar 02, 2014

Hello,

I made a pure DW file, what means I only inserted your "Demo.mp4" in two variation, AND I can't believe it of myself, BUT in my FF 26.0 the both work like a charm, whilst my IE 11 failed. Please have a look here:

http://hansgd.de/DWTest/_mind/indexVid.php

Hans-Günter

Report · Mar 02, 2014

It does not work in IE10 either

Report · Mar 02, 2014

I dont understand why IE doesnt like it. its h.264 in an mp4 container with aac audio...

Report · Mar 02, 2014

As a last effort I contacted my webhosting service IPage. Ipage did not have .mp4 MIME type selected, although I put it in my .htaccess file. Hans-g, could you try my link in IE and see if it works now?

Thanks

Report · Mar 02, 2014

Works for me now in Chrome and IE11 - didn't try any others. I will say that you've designed the page too wide. I'm running 1280x1040 and I have to H scroll to see everything.

Report · Mar 02, 2014

What would you recommend? I'm open to any and all suggestions.

Thanks

Report · Mar 02, 2014

If you want a layout that "fits" every viewport width, use % instead of px.

body {

width: 98%;

margin: 0 auto;

}

video {max-width:100%}

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 02, 2014

If I make the width 98%, the browser just cuts off half of my background image.

Report · Mar 02, 2014

Also when I do that my other 2 links float around aimlessly lol

Report · Mar 02, 2014

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

That is the most useful code I could find to autosize my background image. However I could not get my two picture links and the video to autosize appropriately AND stay in their position.

Report · Mar 03, 2014

You'll need to post a link to your test page. It's impossible to offer advice when we can't see what you see.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 03, 2014

Hello,

maybe of interest for you: In your newest version of your website (http://www.mindtrickvp.com/) your video now works in my IE 11!

See screenshot:

Hans-Günter

Report · Mar 11, 2014

I just wanted to say thanks again to everybody. Nancy sorry I have not responded yet I am still working on it!

Thanks again

Report · Mar 11, 2014

Ok ladies and gentlemen. I have another issue suprise suprise. I have added text to the body of a web page, and I uploaded it to my server. For some reaseon the text is not appearing. It looks great on the live view in Dreamweaver, as well as previews properly.

http://mindtrickvp.com/Contact.html

When I view the source code from the online site, It does not have the same coding as my local one.

Locally, it looks like this

<!doctype html>

<html>

<head>

<title>Contact Us!</title>

</style>

</head>

<body>

<p id="WELCOMETO"> Welcome to MindTrick Video Productions</p>

We offer high quality video production including but not limited to<BR> Commercial, Training, Wedding, Documentary, and How-To videos.<BR> We also do motion graphics.<BR> We would love for you to be our next client! <BR>Contact us now for further information.</p>

<a href="mailto:Mindtrickvp@gmail.com" id="EMAIL">Mindtrickvp@gmail.com</a>

</body>

</html>

Why in the world is it not showing up?!

Thanks

Report · Mar 11, 2014

>When I view the source code from the online site, It does not have the same coding as my local one.

Then you are either uploading to the wrong location or the put is failing. Check your ftp logs.

Also, the html you have posted is not valid - you have content outside the body tags.

Report · Mar 13, 2014

What are you refering to- content outside the body tags?

Report · Mar 13, 2014

This is not proper HTML syntax: Divs must be inside the <body> tag.

</head>

<div id="MOTIONGRAPHICSTEXT"><a href="Motion Graphics.html"><img src="Images/MOTION-GRAPHICS.png" width="410" height="50" alt=""/></a></div>

<body>

=====================

Replace what you have with this:

</head>

<body>

<div id="MOTIONGRAPHICSTEXT"><a href="Motion Graphics.html"><img src="Images/MOTION-GRAPHICS.png" width="410" height="50" alt=""/></a></div>

<p id="WELCOMETO"> Welcome to MindTrick Video Productions</p>

We offer high quality video production including but not limited to<BR> Commercial, Training, Wedding, Documentary, and How-To videos.<BR> We also do motion graphics.<BR> We would love for you to be our next client! <BR>Contact us now for further information.</p>

<a href="mailto:Mindtrickvp@gmail.com" id="EMAIL">Mindtrickvp@gmail.com</a>

</body>

</html>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 13, 2014

What difference will moving them make?

Report · Mar 13, 2014

The difference is invalid vs valid code. Browsers don't like invalid code because it confuses them and leads to X-browser rendering problems. In addition, DW chokes on bad code.

Use the code validation tools below often during development and fix your errors before they lead to bigger problems later.

CSS - http://jigsaw.w3.org/css-validator/

HTML - http://validator.w3.org/

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 14, 2014

Is it bad to have all your CSS rules on one sheet?