I (and about a million others) have found a bug in IE11 (not sure if other versions have the same bug) where, if you create an HTML5 audio tag, the browser reports "Invalid Source" no matter what. I've tried every combination I can think of with no luck. So far:
Changing the HTML end tags from self-closing to explicit
Changing the file name to eliminate any odd characters
Changing the audio sub format to every possible setting
Adding an explicit URI ("http:// ...")
Disabling all plugins (there were on the stock plugins)
Trying every possible audio format
Defining the MIME type
Changing the audio tag's parameters.
Changed the IIS settings to include the MIME types.
I have checked Microsoft's "Connect" website. They make the claim that it is not reproducible, but hundreds of thousands of Google results suggest otherwise.
Is this not possible at all? ALL other latest & greatest browsers I tried work (Firefox, Opera, Safari, Chrome). No solutions work.
Here's the code:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="AudioPopupPlayer.aspx.vb" Inherits="AudioPopupPlayer" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div style="padding-top: 30px; margin: auto; width: 300px;">
<asp:Literal ID="litVoiceOver" runat="server"></asp:Literal></div>
</body>
</html>
Code behind:
Partial Class AudioPopupPlayer
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim VoiceOverFileName As String = Request.QueryString("vo")
If VoiceOverFileName.Length > 0 Then
Dim root As String = HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority) + ResolveUrl("~/")
Dim audiosource As String = "<audio id=""VoiceOver"" autoplay=""autoplay"" preload=""preload"" controls=""controls""><source src=""" & root & "audio/" & VoiceOverFileName & ".ogg"" type=""audio/ogg"" ></source><source src=""" & root & "audio/" & VoiceOverFileName & ".mp3"" type=""audio/mpeg"" ></source><source src=""" & root & "audio/" & VoiceOverFileName & ".wav"" type=""audio/wav"" ></source></audio>"
Me.litVoiceOver.Text = audiosource
End If
End Sub
End Class
And, finally, a screenshot (in IE11) showing that the HTML is rendered perfectly, yet I still get the dreaded "Invalid Source" message (NOTE: copying and pasting the link causes the audio file to play - go figure).
I had the same issue trying to use the simple HTML5 code. The url and file name were correct as well. This is what worked for me:
<audio src="song.mp3" controls autoplay></audio>
You can remove the controls if you don't need them, it's still going to work. I hope this helps!
I tried a couple of new file formats.
Internet Explorer 11 only supports the M4A audio format (WAV, OGG & MP3 are not supported).
Microsoft really needs to put the correct information on their website about what their browser supports (they claim MP3 is supported, but clearly, it is not).
Madness, I tell you!
We have experienced the same issue in a corporate environment with fresh installs of IE11 and Windows 7.
We have resolved the issue by installing the K-Lite media pack and have an alternate MP3 codec installed. Then it worked.
A comment from here:
Posted by Jonathan Laughery on 23.5.2014 at 22:19
This is because IE's HTML5 audio tag doesn't support WAV PCM format. This is especially weird because IE does support WAV PCM in the deprecated bgsound tag, WAV PCM has been the native Microsoft Windows audio format forever, and Microsoft's is the only major browser that doesn't support it. WAVs are still popular in sound archives and used on corporate networks, but playing WAVs in IE requires the bgsound tag (IE-specific, deprecated, and poor control), transcoding on the server, or using a flash player (like jPlayer's fallback) which is what the HTML5 audio tag was designed to avoid. Please add this format.
Here's the documentation about bgsound . If you going to use bgsound this might be helpful
Check the browser's response headers for the audio file response. I ran into this issue due to a server not being configured to send the audio file as an audio/mpeg. Someone had mp3s set to application/octet-stream in IE. Once I fixed this, everything worked fine.
Related
I have been looking at a HTML 5 boilerplate template (from http://html5boilerplate.com/) and noticed the use of "?v=1" in URLs when referring to CSS and JavaScript files.
What does appending "?v=1" to CSS and JavaScript URLs in link and script tags do?
Not all JavaScript URLs have the "?v=1" (example from the sample below: js/modernizr-1.5.min.js). Is there a reason why this is the case?
Sample from their index.html:
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">
<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>
<!------ Some lines removed ------>
<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>
<!--[if lt IE 7 ]>
<script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->
<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->
These are usually to make sure that the browser gets a new version when the site gets updated with a new version, e.g. as part of our build process we'd have something like this:
/Resources/Combined.css?v=x.x.x.buildnumber
Since this changes with every new code push, the client's forced to grab a new version, just because of the querystring. Look at this page (at the time of this answer) for example:
<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">
I think instead of a revision number the SO team went with a file hash, which is an even better approach, even with a new release, the browsers only forced to grab a new version when the file actually changes.
Both of these approaches allow you to set the cache header to something ridiculously long, say 20 years...yet when it changes, you don't have to worry about that cache header, the browser sees a different querystring and treats it as a different, new file.
This makes sure you are getting the latest version from of the css or js file from the server.
And later you can append "?v=2" if you have a newer version and "?v=3", "?v=4" and so on.
Note that you can use any querystring, 'v' is not a must for example:
"?blah=1" will work as well.
And
"?xyz=1002" will work.
And this is a common technique because browsers are now caching js and css files better and longer.
The hash solution is nice but not really human readable when you want to know what version of file is sitting in your local web folder. The solution is to date/time stamp your version so you can easily compare it against your server file.
For example, if your .js or .css file is dated 2011-02-08 15:55:30 (last modification) then the version should equal to .js?v=20110208155530
Should be easy to read properties of any file in any language. In ASP.Net it's really easy...
".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");
Of coz get it nicely refactored into properties/functions first and off you go. No more excuses.
Good luck, Art.
In order to answer you questions;
"?v=1" this is written only beacuse to download a fresh copy of the css and js files instead of using from the cache of the browser.
If you mention this query string parameter at the end of your stylesheet or the js file then it forces the browser to download a new file, Due to which the recent changes in the .css and .js files are made effetive in your browser.
If you dont use this versioning then you may need to clear the cache of refresh the page in order to view the recent changes in those files.
Here is an article that explains this thing How and Why to make versioning of CSS and JS files
Javascript files are often cached by the browser for a lot longer than you might expect.
This can often result in unexpected behaviour when you release a new version of your JS file.
Therefore, it is common practice to add a QueryString parameter to the URL for the javascript file. That way, the browser caches the Javascript file with v=1. When you release a new version of your javascript file you change the url's to v=2 and the browser will be forced to download a new copy.
During development / testing of new releases, the cache can be a problem because the browser, the server and even sometimes the 3G telco (if you do mobile deployment) will cache the static content (e.g. JS, CSS, HTML, img). You can overcome this by appending version number, random number or timestamp to the URL e.g: JSP: <script src="js/excel.js?time=<%=new java.util.Date()%>"></script>
In case you're running pure HTML (instead of server pages JSP, ASP, PHP) the server won't help you. In browser, links are loaded before the JS runs, therefore you have to remove the links and load them with JS.
// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];
for (i=0; i < cacheBust.length; i++){
var el = document.createElement('script');
el.src = cacheBust[i]+"?v=" + Math.random();
document.getElementsByTagName('head')[0].appendChild(el);
}
As you can read before, the ?v=1 ensures that your browser gets the version 1 of the file. When you have a new version, you just have to append a different version number and the browser will forget about the old version and loads the new one.
There is a gulp plugin which takes care of version your files during the build phase, so you don't have to do it manually. It's handy and you can easily integrate it in you build process. Here's the link: gulp-annotate
As mentioned by others, this is used for front end cache busting. To implement this, I have personally find grunt-cache-bust npm package useful.
CSS files not rendered in IE 9 and 10 but works good in compatibility mode.
I am the following error get "SEC7113: CSS was ignored due to mime type mismatch" in IE 10 .
wherein i don't get a content-type in my response header!
Further this is on my local.
Any suggestions could be appreciated.
It has an answer, summary would be:
As due to MIME type mismatch css was ignored in IE 9 and 10. The MIME type can be correct by utility called File TypesMan It is freeware created by NirSoft. It turned out that the MIME type of .css had been changed to text/plain, preventing IE from rendering my styles. using FileTypesMan to change it back to text/css fixed the problem.
Download FileTypesMan from the NirSoft site. Use the links near the bottom of the page to select the correct version for your operating system (there are different versions for 32-bit, 64-bit, and Windows 98/ME).
Unzip the files to a local folder, and double-click FileTypesMan.exe.
When FileTypesMan has finished listing all file types, scroll down in the top pane to find .css.
Double-click to edit the settings.
Change the value to text/css in the MIME Type field in the dialog box that opens.
Click OK. Job done.
IE 10 should now behave itself (well, at least as far as rendering style sheets is concerned).
Not my work: Its not my own search, you can see this here: https://stackoverflow.com/a/18791928/1762944
I hope this fixed you!
I was wondering that you are not writing type="text/css" but you said, that you are! So I found this the next helpfull article! It has the same issue as yours. SEC7113: CSS was ignored due to mime type mismatch
I just did a simple Google search for the issue, and this was the first result! You should have searched for the issue.
Please ensure that the CSS file gets delivery with the correct "Content-Type" from the server. It must be "text/css". Use the developer console to determine the current type.
Potentially you need to adjust/create the MIME type mapping (e.g. for httpd).
hth
Try to specify the attribute type="text/css" in your tag. Place your style tag in <head> section.
I was having similar problem with an embedded micro-controller (not a lot of control over the server changing content type). Not sure if this applies but I found going into Settings->Compatibility View Settings and adding the IP (site) address the CSS was accepted and the page rendered properly.
I know how to get the IP address but is there a way for me to get the client machine name?
addr = request.servervariables("REMOTE_ADDR")
You can't. HTTP does not transmit that information. A Windows network does, which is not HTTP.
The only method that has worked for me is to have some local VBScript send back the information - which will only work in IE.
Because I'm working on a corporate intranet where I know everyone is using IE, it was a workable solution. I did eventually migrate some of the code (notably sending back the machine name) to a deployed HTA (HTML Application) in a recent update. Since HTA's only work on Windows, and always use the IE rendering engine, it removed some of the concerns we had with people potentially accessign it on non-IE browsers.
Inside a text file with a .hta extension, we have the following which sends back to the server the machine name:
<HTML>
<HEAD>
<TITLE>Full Name of App</TITLE>
<HTA:APPLICATION ID="AppID" APPLICATIONNAME="AppID" SHOWINTASKBAR="yes"
SINGLEINSTANCE = "yes" WINDOWSTATE="maximize" ICON="http://example.com/favicon.ico">
<STYLE TYPE="text/css">
html, body {margin:0px;padding:0px;}
iframe {margin:0px;}
</STYLE>
</HEAD>
<BODY scroll="no">
<script type="text/vbscript">
Set objNet = CreateObject("WScript.NetWork")
document.write("<iframe id=""frmClient"" trusted=""yes"" src=""http://example.com/projects/projectname/default.asp?Workstation=" & objNet.ComputerName & """ WIDTH=""100%"" HEIGHT=""100%""></IFRAME>")
Set objNet = Nothing
</script>
</BODY>
</HTML>
Obviously this may not work for you depending on what you may or may not be able to use - I figured I'd post this in case it's helpful for someone with similar constraints to my usage.
I have a graffiti blog and i have a strange problem which is showing strange char page like this:
alt text http://amrelgarhy.com/ScreenShots/error.jpg
This page was showing when I opened my control panel admin page. It's also showing the same when I try to edit one of my previous posts. My problem is that i don't know what's the reason behind it.
I am not sure how to fix this. All my posts are in English and I always use Windows Live Writer to post.
Has anyone faced a problem like this before? Can you advise me on finding the cause of this problem, and any potential solution?
Looks like it might be an encoding mismatch. Are you opening UTF-8 (or some other Unicode)-encoded files in a tool that doesn't understand UTF encodings or vice-versa?
Try placing this in your master page:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Also, check that a virtual directory has been created.
There seems to be a problem with the content MIME-types. The weirdness you are seeing happens because the server offers content as binary (I'm guessing application/octet-stream) even though it should offer them as text/html. Images should be offered as image/<extension>, for example image/png.
You can manually set MIME-type handlers to certain filetypes. If you are using Apache, you could easily to this in a .htaccess file like this:
AddType text/html .html
If your content is something else than HTML the MIME-type is something different. If your web-server doesn't automatically do this you should probably add the handlers yourself.
All MIME-types can be found from here: http://www.iana.org/assignments/media-types/
I have a friend experiencing problems testing a web site of mine that provides a CSV export for a report. He says the CSV is output to the screen, and no file is created.
It works fine on my IIS7, Vista, and IE7 setup. I can't get more details at the moment, but I'd like to at least ask: is my code, below, for sending the CSV adequate to be browser/version independent?
Response.Clear();
Response.Buffer = true;
Response.ContentType = "text/csv";
string fileName = GetExportFileName();
Response.AddHeader("Content-Disposition", "filename=" + fileName);
dt.WriteCsv(Response.Output, false);
Response.End();
I'm building fileName to include a date with /separators, which may be causing a problem, but it doesn't affect my machine, and the / gets automagically replaced with _.
I have also used
Response.AddHeader("content-disposition", "attachment;filename=FileName.csv");
which adds the "attachment" text. You might try that to see if it makes any difference for your friend.
There is a known problem in IE6 that do not correctly support the content-disposition meta tag and there are some gotchas in how to compose the various meta tags.
This link from Scott Hanselman details everything about the issue.
Regards
Massimo
Very late to the party very here, so this is more for anyone who came across this issue at a later time. This is in relation to quote "No HTTP header will force IE6 to offer a download."
In PHP I have the headers set as the following for IE to show a 'Save' button, and not just download the file - or display the file in the brower window.
Response.AddHeader("X-Download-Options", "noopen");
Response.AddHeader("X-Content-Type-Options", "nosniff");
The X headers are used to indicate that it is a non-standard header type. Works in IE6.
The only sure fire way to get IE to prompt for a download is to have the CSV file compressed (ie file.csv.zip or file.zip).
See
http://blogs.msdn.com/ie/archive/2005/02/01/364581.aspx
Handling MIME Types in Internet Explorer
MIME Type Detection in Internet Explorer
No HTTP header will force IE6 to offer a download. This is especially true for text content, which is 'auto-detected' by IE.
You can try with Content-Disposition attachment; filename=file.csv but I'm not certain it'll always work. If it does, please confirm.
You didn't mention what browser your friend is using. In the end, it could be a bug or non-standard behavior.
The following technique seems to work fine for me: http://www.blackbeltcoder.com/Articles/asp/creating-downloadable-content-dynamically.