I'm having an issue with ie9 and mp4 videos. If I open the page in Safari the mp4 videos work fine but they won't load in ie9. I'm out of ideas as to what it might be.
On my local windows machine the html5 videos play fine, once the pages go to the live server they no longer work. Opera and Firefox are working fine with the OGG format. Safari plays the .mp4 format but IE will not. Internet explorer is the only browser that is acting odd.
I thought it was a Mime Type issue except that Safari works with the server side .mp4 file.
Iv looked into it being a Doctype issue, except the doctype on the live site is the same as it is on my local. I'm running out of ideas as to what could be causing this.
<video webkitSupportsFullscreen='false' width="960" height="640">
<source id="mp4" src="/videos/video.mp4" type='video/mp4' />
<source src="/video/video.ogg" type="video/ogg" />
<source src="/video/video.webm" type="video/webm" />
<img src="/images/screenshot.jpg">
</video>
HTML5 Please recommand using a polyfill for this.
So you can use this one : http://mediaelementjs.com/
Note: Are you sure your DOCTYPE respect the HTML5 syntax as following :
<!DOCTYPE html>
Do you have a <!doctype html> defination? If it's not, IE9 will run in quirks mode that has no html5 support.
Make sure to add the meta tag for the X-UA-Compatibility for IE ANYTHING!
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
Related
I have a website built with bootstrap and loading video in a dialog:
<video width="760" style="background-color: white;" preload controls autoplay>
<source src="....." type="video/mp4" />
</video>
Shows and works fine in IE, Chrome and Safari.
In Firefox auto play worked a few times, and now does not work at all.
No errors in console and video plays just fine manually using controls.
I have also tried script approach (without autoplay attribute):
oncanplay="$(this)[0].play()"
And works flawlessly on all browsers except Firefox.
Can anyone see what could be wrong?
I have tested this on all browser its working perfect with javascript event
<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.mp4.webm" type="video/webm" />
<source src="video.mp4.ogg" type="video/ogg" />
Your browser does not support the video tag or the file format of this video.
</video>
The problem has an easy solution: changing the order of the videos, listing first the .mp4 source and next the .webm source made the auto-play videos run on Firefox, Explorer and Chrome, this of course is valid if you have multiple video sources.
A side note: Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed. Partial support for Firefox refers to the lack of support in OSX & some Linux platforms, for Android Firefox it refers to the inability of hardware acceleration.
This worked for me for the firefox browser, but it have to be muted.
<video
width="100%"
height="100%"
onloadedmetadata="this.muted = true"
autoplay
>
<source src="assets/videos/Helpline_Video.mp4" type="video/mp4" />
</video>
First check your web page here for test
http://html5test.com/
Second inspect via code inspector and enter them in the browser to check if the are working fine or not. Or drag and drop video file over the browser to check if its working or not.
Thirdly try checking MIME Types
AddType video/mp4 for .mp4 .m4v
AddType video/ogg for .ogv
AddType video/webm for .webm
Fourthly check you html5 converter it has often problem with format conversion I had same problem year back when I was working html5 video. Changing it fixed the issue for me.
Last but not the least; Add a flash fall-back!
<object type="application/x-shockwave-flash"
data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"
height="227" width="220">
Firefox Video Issue: Troubleshooting
Make sure that the server sends the video files with a correct and supported MIME type to make it work in Firefox.
link
Use source URL relative to ROOT, not Web page
Eg: src="/complete/folder/path/video.ogv"
Version of mozilla.
Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.
Firefox 4 supports WebM.
link
From Firefox 66 and aboew, you must click the unblock button on the right of browser bar to unblock Autoplay Video and Audio
I’m having a problem getting HTML5 to work in IE9. It showed up as a failure to execute the video tag. It works fine in Firefox, Opera and Safari but I just got a blank screen in IE. This is the code:
<video width="320" height="240" controls="controls">
<source src="video1.mp4" type="video/mp4"/>
<source src="video1.ogg" type="video/ogg"/>
</video>
Then I ran the HTML5 compatibility test at http://html5test.com and I also got a blank screen in IE, so it’s more than the video tag that’s at issue.
Then I tried running an .mp4 sample video online ( http://archive.org/details/Pbtestfilemp4videotestmp4 ) - it does not run within the browser, but opens in VLC player! In Firefox, Opera and Safari, it runs in the browser.
I’ve reinstalled IE – no good. When I check the IE version, it says Internet Explorer 9, but after "Version:", there's a blank.
Any ideas?
I had a similar issue and it turned out that my server wasn't returning the correct MIME type for the video object. Check out this guy's info - http://blogs.msdn.com/b/thebeebs/archive/2011/07/20/html5-video-not-working-in-ie9-some-tips-to-debug.aspx
I just added this code to my .htaccess file and it worked immediately -
AddType video/mp4 .mp4
use [HTML5Shiv] to enable HTML5 tag for Internet Explorer. And add WebM video format to the sources
I am trying to use Flowplayer to allow HTML5 video where available and use the flash fallback when it is not supported.
This works fine in Firefox and Chrome, however in IE9 it cannot find the video and below IE9 it just doesn't support the video.
Am I doing something wrong or is flowplayer not supported by IE?
Solution Summary
I was running into a similar issue and I think I have solved it, so perhaps this will fix it for you as well. My problem ended up being the MIME type for my .mp4 video file was being served as video/mpeg. When the video is served as video/mp4, it will load correctly on IE9. I did not test an .ogg file, but I have a feeling that the problem is similar.
Analysis:
I was a little puzzled because I was seeing the video work (in all browsers) on the main flowplayer demos page and also on this HTML5 Video Player Comparison page. However, I was feeling a little vindicated because their own developers were having trouble getting a consistent load, has been filed as part of a bug report, and their "fix" demo was not working for me either (but their main demo was!).
Deduction:
After completely mirroring their setup and following the setup documentation, my player was still not working in IE9, but was working in Firefox, Chrome, and IE8 (with flash fallback).
I decided to try loading their video, from their server, and it worked instantly. I inspected the network pane in IE9 and discovered the MIME type discrepancy. My servers were serving .mp4 files as "video/mpeg" when the flowplayer servers were serving the .mp4 file as "video/mp4". I know that the .mp4 file type is simply a container, and a video file depends on the underlying encoding scheme, but I had a feeling that IE9 is just picky on trying to decode video based on MIME type—it won't even attempt to play it if it isn't something it recognizes as playable. I had the network administrators change the MIME type and the same video which was failing earlier now works perfectly.
For reference, this is how I had my HTML set up:
in the head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://releases.flowplayer.org/5.1.1/flowplayer.min.js"></script>
in the body
<div class="flowplayer is-splash">
<video preload="none">
<source src="http://stream.flowplayer.org/black/470x250.mp4" type="video/mp4" />
</video>
</div>
Right here is a solution that seems to work for me....
Basically the flash fallback for flowplayer seems to just not work in IE...
The solution is to use the old Flowplayer flash plugin and use IE conditional tags like this:
<!--[if IE]>
<a href="videos/file.mp4"
style="display:block;width:520px;height:330px"
id="player">
</a>
<script>
flowplayer("player", "/swf/flowplayer-3.2.15.swf");
</script>
<![endif]-->
<!--[if !IE]><!-->
<div class="flowplayer" data-swf="swf/flowplayer.swf" data-ratio="0.417">
<video>
<source type="video/mp4" src="videos/file.mp4"/>
<source type="video/ogg" src="videos/file.ogv"/>
</video>
</div>
<!--<![endif]-->
After doing a lot of research and unable to add the header tag to force compatibility mode (because my video is inside a modal). I got it to work for IE9 by changing the source tag from
<source type="video/mp4" src="video.mp4"></source>
to
<source type="text/html" src="video.mp4"></source>
I saw that when the video was not being played in IE9, the mp4 file was being redered as text/html and not video/mp4... so I just tried changing the tag and it worked!
I know this does not make any sense... but since when IE makes sense?! So, if you cant set the header in your php file header('X-UA-Compatible: IE=EmulateIE8'); like in my situation, try setting the mp4 type to text/html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="300" height="170" poster="../images/audi/audi_poster.png"
data-setup="{}">
<source src="../videos/audi/audi.mp4" type='video/mp4'>
<source src="../videos/audi/audi.ogg" type='video/ogg'>
<source src="../videos/audi/audi.webm" type='video/webm'>
</video>
</body>
</html>
For the above code, the file plays without any error on Google Chrome but not on Firefox and IE.
I have no idea where I am wrong.. PLease help.. I really need to solve this issue.
pls help
The website runs on goddady server. I am not using any database to store the video file nor any php programming.. I simply upload the video to the server n the the html file...
Its a very simple page I want to have with the video playing for all 3 browsers..
The HTML5 video and audio tag support is not the friendliest at the moment.
Firstly you DOCTYPE should be <!DOCTYPE html> as mentioned in the comment. Then there are a couple of things to consider:
Firefox doesn't support MP4 playback, neither does Opera. You will need to convert the video from MP4 to WEBM or OGG format and put them in the same directory as the MP4 to suit your example.
IE8 and below don't support the <video> tag at all and I'm guessing that's the problem with your IE version. IE9 does support MP4 playback however.
After having a good play with this for a project I am currently working on here are some of the issues I also came across:
iOS devices (and mobile devices in general) don't really like the tag (especially inline), after playing with it for a while I ended up just straight linking to the MP4 video and it now opens up in the default player.
Google Chrome or IE9 don't support a fullscreen button yet, but Safari does. Haven't checked FF or Opera, see below.
To avoid the need for users to upload 3 different files. I've added a flash fallback (Flowplayer) for FF and Opera (and any browser that doesn't support MP4 <video> playback). I may create the WEBM or OGG files on the server, but this also helps with older browser like IE8. Here is a JavaScript snippet on how to check support for MP4 playback:
var flashaudioplayer=false;
var flashvideoplayer=false;
// Check if browser supports HTML5 native mp3/mp4 playback
var audioTag = document.createElement('audio');
var videoTag = document.createElement('video');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
flashaudioplayer=true;
}
if (!(!!(videoTag.canPlayType) && ("no" != videoTag.canPlayType("video/mp4")) && ("" != videoTag.canPlayType("video/mp4")))) {
flashvideoplayer=true;
}
You will also find the same issues with MP3 playback support in the <audio> tags, Flowplayer also has a way to play MP3 files so it's a nice option for a flash fallback.
I have the following html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html
{
height: 100%;
}
</style>
<script language=javascript src="scripts/lib.js"></script>
</head>
<body>
<audio controls autoplay>
<source src="track09.wav">
</audio>
</body>
</html>
It does work in FF4, but doesn't in Safari 5.0.5 under Winx64. How should I fix it?
Thx.
UPDATED. Both mp3 and html files are local, not stored on server side.
You need a different format than .wav - encode your audio in mp3 and ogg and include both formats in your markup like this:
<audio controls autoplay>
<source src="track09.ogg" type="audio/ogg" />
<source src="track09.mp3" type="audio/mpeg" />
</audio>
You can get a utility to do the encoding for you from http://audacity.sourceforge.net
This will cover all browsers that currently support html5 audio.
The answer is little edited.
Add type for source. I've tested in Safari. This code works for me.
<source src="track09.wav" type="audio/x-wav">
The other solution (for Safari) is to use AAC codec. It doesn't work in Firefox.
<source src="track09.aac" type="audio/aac" />
You may use Ogg Vorbis for Firefox. It probably doesn't work in Safari.
<source src="track09.ogg" type="audio/ogg" />
It looks there isn't any universal codec. You have to encode Your sound few times or don't support few browsers.
P.S.
It looks mp3 doesn't work anywhere for me.
For local testing it does not matter if the files are local, so are the html files.
the solution is not obvious at the first sight.
The Safari browser relies on Apple Quicktime to support the Audio tag.
If you download the Safari-Browser for testing purposes it will not work.
You need the complete package as Safari uses the Codec of Quicktime to support playback.
look here:
HTML5Tutorial
Furthermore the MP3 should be on the first place that safari can recognize it.
The best solution IMHO is to use multiple source files and mediaelement.js
Ekaterina,
Safari 5 does not play audio by itself. It needs QuickTime installed on Windows. Do that, and probably will work (If you still need it, since it was asked 2 years ago!)
https://discussions.apple.com/thread/2544849?start=0&tstart=0