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:
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
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/
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
Thank you both for your replies.
I seem to be struggling with cross-browser compatiblity here!
Pickle player seems like the ideal solution for my purposes. I looked into it before a few months back, but got side tracked.
Despite it's seemingly fool-proof implementation, I have followed the guide word for word and am still not able to get my videos to display correctly on the page.
All the seems to happen now is that pickle player renders my chosen skin, but no video! It is rather frustrating because I have followed exactly what it said!
Just a quick edit to say that it seems that only certain skins allow for video playback and I seem to have it working now. So thank you again for recommending it. I'll just start to work my way through all the video content and update it to pickle. Unfortunately I find it a bit clunky as far as laying it out on the page goes and can't seem to figure out how to centre the player within the <div>!
Message was edited by: dannybhoy67
can't seem to figure out how to centre the player
Note CSS changes below delete add
margin:0 auto; /**with width, this is centered**/