Skip navigation
Currently Being Moderated

HTML5 Video not showing in IE9 or 10

May 9, 2013 3:47 AM

Tags: #flash #video #flv #html5 #ie10 #mp4_h.264

Hello all,

 

Just a quick question re. the video tag and its application and rendering within newer versions of IE.

 

I've recently added some new videos to our website. The way I've set it up is to use the <video> tag and direct the source to an .mp4 (H.264) and then I have a flash version as a fall back. I haven't put a webm version in there, but I may do so later for Firefox compatibility.

 

The issue I am having is that in IE10 (which I believe to support mp4s and the video tag) I just get a blank video window loading up and the error message: "Unsupported video type or invalid file path". Now, I'm fairly sure that the file path is correct, as I have double checked it several time and the fall back to flash player seems to render fine when loading the page using IE8. In chrome I get the player loading but it just seems to sit there doing nothing, no blank window, no error message, just the controls.

 

If someone woulnd't mind taking a look at the code I am using to try and achieve video playback on my page, I'd really appreciate it. I might just be missing something really obvious! 

 

As I don't seem to know how to post a code box on these forums, I will just link you to the page in question:

 

http://www.stosmunds.dorset.sch.uk/pages/information/welcome.htm

 

Many thanks!

 
Replies
  • Currently Being Moderated
    May 9, 2013 6:25 AM   in reply to dannybhoy67

    For some reason I can't get to your page, I get a "Server Not Found" error.

     

    You need at least two types of video files if you are using the HTML5 <video> tag to run your content. You also need to make sure they are encoded correctly (I've run into folks who simply change the file suffix from, say .avi to .mp4 thinking that will make it work in IE, it won't).

     

    You need to have an MP4 for IE and Safari, and either WebM or Ogg for Opera and Firefox, Chrome sees all three.

     

    You may also need to edit your htaccess file to include the mime types for Ogg and WebM

     

    http://www.w3schools.com/tags/tag_video.asp

     

    Of course, only HTML5 browsers will see any of the above. For better cross-browser compatibility, it would be simpler to go with something like Pickle Player: http://www.pickleplayer.com/

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 9, 2013 7:06 AM   in reply to dannybhoy67

    If you're planning to use HTML5 video, you should include MP4, WEBM & OGV formats for it to seamlessly play across browsers. Take a look here to see what formats are supported by what browsers: http://caniuse.com/#feat=video

     

    Also, your code is malformed. <video> is HTML5 tag, but your page doctype is XHTML1.0.

     

    <source> tag doesn't require </source>. You've nested a flash player within <video> tag which is redundant and will make IE go to quirks.

     

    For a proper implementation of HTML5 video, look here: http://www.w3schools.com/html/html5_video.asp

     
    |
    Mark as:
  • Currently Being Moderated
    May 10, 2013 1:30 PM   in reply to dannybhoy67

    can't seem to figure out how to centre the player

     

    Note CSS changes below delete  add

     

    .PKL_wrapper {

        left:0px;

        display:block;

        top:0px;

        width:480px;

        margin:0 auto; /**with width, this is centered**/

        float:left;

        position:relative;

        z-index:1;

        height:358px;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 19, 2013 11:01 AM   in reply to dannybhoy67

    As of right now, your videos still don't play in IE9 or IE10.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points