MediaElement.js not working in IE8 - internet-explorer-8

So I've read other posts and the supposed fixes for IE8 but none have seemed to work. The main player on the MediaElementjs.com site doesn't even work in IE8.
Can anyone point me to a site that they know uses mediaelement.js successfully in IE8?
The plan being to view source and repeat what they've done.
Thanks!

My site seems to work in IE8, here is a page with a video: http://www.theguitarlesson.com/guitar-lessons/white-christmas-guitar-lesson-bing-crosby/
I had to set enablePluginSmoothing to true as describe here, since the Flash playback quality was baaaaad out of the box, but didn't do anything else. That I found here: Video quality issues with MediaElement.JS and Flash

I found that I had to put the
<script>$('audio').mediaelementplayer();</script>
last in the body element for it to work in IE8 and other old IE versions. I'd put it in the head, since the instructions say the link to the script has to be in the head if you want to support old versions of IE so I assumed the call would have to go there too.
If you've copied the object tags from the full video example (Option B on the site) then IE will load the Flash player but won't add the mediaelement.js markup that's needed to load the media.
The best example to work from for audio is the demo/mediaelementplayer-audio.html page in the zipped download in the latest version (you'll need to download the media as well, not sure why that's separate but it's here: https://github.com/johndyer/mediaelement-files/ ). Copy the pieces of it into your page, in the same places, then replace with your own file paths. If that doesn't work, then the problem is likely with your MIME type or CSS visibility properties.

Issue calls after $(document).ready, or when media element has loaded.

Related

Firefox pdf form displays a "4" in checkbox (instead of a checkmark); Works fine in IE & Chrome

I am creating a pdf document (via ColdFusion), but when I preview the rendered pdf in Firefox, I get the number "4" where my checkmarks are supposed to be (see photo below). When I preview the exact same pdf in Chrome or IE, I see the checkmark, and it all works perfectly!
I am pre-populating the pdf form fields (via ColdFusion session variables), and then rendering the pdf using the following markup:
<cfpdfform source="82040.pdf" action="populate">
<cfpdfformparam name="org" value="">
</cfpdfform>
Here is the resulting pdf form in Internet Explorer:
Note how the checkmark is rendered properly:
Here is the same form previewed in FireFox:
Note how the the checkbox has a "4" instead of a checkmark:
Any help would be greatly appreciated!
It is a bug with Firefox's PDF Viewer. Currently, there is no fix. As radiovisual's post points out, the bug in the underlying library (pdf.js) was supposedly fixed. However, there is still the issue of Mozilla updating the older version baked into Firefox (which is what most folks are using). Currently, that bug is still outstanding.
Probably the best you can do is to return the pdf as an "attachment", rather than "inline", so the browser prompts them to "open/save" the file. If the user opts to "open" the pdf, it should open with their default program instead. (Adobe Reader is the default for most users).
<cfheader name="Content-Disposition" value="attachment; filename=fileName.pdf">
<cfcontent type="application/pdf" .../>
Update:
This bug was apparently addressed already, as pointed out via the project's github repo: the bug was supposedly fixed during this commit. So if you are still experiencing problems, it either means:
You are using an outdated version of the pdf.js library,
Or, the problem has been re-introduced into the library.
So to start things off, you will want to make sure that you are using the most up-to-date version of the pdf.js library. If you are still experiencing problems, even with the most up-to-date version, then the problem is still within the embedded pdf document viewer, and there aren't too many things you can do to fix this until the project maintainer's finally fix the problem.
The issue you are experiencing (the reason why you are seeing a "4" where there should be a checkmark, is because the pdf.js library is using a special symbol font to render the checkmarks, but in problematic versions of firefox's embedded pdf-viewer the symbol font isn't rendering the checkmark correctly, so it shows a "4" instead of a checkmark -- because the checkmark symbol they are using in the custom font just so happens to be mapped to the number "4".
Similarly, for the same reasons cited above, if you assign the checkbox to render squares (instead of checks), the letter "N" will appear in the checkbox instead of a square, because the square shape symbol is mapped to the letter "N".
This problem only exists in the embedded pdf document viewer in Firefox but will look perfectly normal when viewed in Adobe Acrobat Reader, or other offline pdf readers (and other browser pdf readers, which is why it looks fine in Chrome and IE), so when users download the form, it will appear like you would expect it to.
Some workarounds / optimizations you could try:
Try one of these, or all of these, they are in no particular order (or guaranteed to work)
Don't rely on the built-in pdf.js browser extension in firefox, instead, make your own updated version based on the latest pdf.js source or target another pdf library and use it's browser-agnostic API to render and display your pdfs.
Create an HTML form for the user to fill and verify all the information, then render the pdf based on the data supplied by the HTML form, for download only (no previewing in the browser). This will force them to open the pdf in their default pdf viewer where the issue is not present, because, again, the problem you describe only happens in Firefox's embedded pdf viewer and not in other pdf viewers like Adobe Acrobat).
Make sure you have the ZapfDingBats Font installed on your server. I haven't confirmed this, but that commit that was supposed to have solved this issue seems to have added support for this font, so it is worth a try to make sure this font is accessible on your ColdFusion server, then try previewing the rendered pdf in Firefox.
Detect that the user is accessing your form via Firefox, and if so, warn the users of the issue, but assure them that downloading the form and viewing in their default pdf viewer will work as expected.
Convert the page to HTML5 (if you aren't already), then add in an HTML5 shiv (so HTML5 features can be used on older browsers), and a CSS normalizer, and test if the problem persists using these optimal settings. It's worth a shot to make sure that the problem is somehow treated differently under the HTML5 standard, since not everyone is having the same issues as you.
Lastly, make sure that your HTML is being rendered as valid markup via your ColdFusion output by using an HTML validator.
Other than that, there isn't a whole lot you can do until the mozilla team updates their embedded pdf viewer. But since the problem is only in the firefox viewer, and not in the pdf itself, it it up to you to decide if this is a deal-breaker or not, and search for alternatives.
Note: PDF.js is built into version 19+ of Firefox.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Update: You can use this pdf (which represents the character mapping of the ZapDingbats symbol font) as a way of testing your browser's interpretation of embedded fonts in the pdf rendered via pdf.js. Note that at the time of this writing, the above pdf does not display the Zapf Dingbats properly in Firefox (via pdf.js), but other browsers render them just fine (notice the "4" next to a20[x2714] in firefox, and the checkmark next to the same entry (a20[x2714]) in Chrome.

firefox mediaelement.js

I am trying to use the mediaelement.js library with Drupal. When I install the mediaelement drupal module and js library I am able to play MP3 files on all browsers except Firefox. It appears there is an issue with the Flash Fallback. But on the mediaelement.js page I see the MP3 player working in FF.
How can I diagnose this issue? What steps can I talk to find out if it is this version of the JS library, the Drupal module, or something I am doing.
I had the same issue, there are 2 things I suggest:
Add MIME-Type:
Add new mime type for your media types into your server config or directly in .htaccess
E.g. in my case I added
AddType video/mp4 .mp4
at the end of .htaccess to make it work in FF
Make sure that mediaplayer is initialized correctly and that all paths are set
up correctly. Check pluginPath and flashName properties.
Check http://mediaelementjs.com/#installation for more info.

images not loading in Internet Explorer. why?

ive been finally polishing off a website i was building but to my dismay i recently checked the website in Internet Explorer and found the images weren't loading fully.. you can see can the borders for the image but nothing loads in between. i thought it might something i altered on wordpress, but the main page has images from from non wordpress html files and they don't load either.. everything works fine on every other browser except Internet Explorer.. any ideas why? probably a simple fix
here's the website.. . all the code and css is viewable there, if you want my wordpress code let me know
maybe the code just needs to rearranged to make window browsers happy?
any help would be great
Looking at the source for the shop.html, it looks like you are specifying the height of the images, but not the width. Opera, and Firefox are ignoring the width="" and using the default width, but IE is setting it to width="1." I don't know how to change this in Wordpress but if you remove the width="" or add a value it will show correct.
You can see this if you r-click the image line in IE and select properties: it shows as 1X290px.
img src="images/shop/julianduron.jpg" width="" height="290"
hope this helps

Multiple swf files not loading in DNN 5.X

We have run numerous tests now and it has now come down to either a DNN-SWFObject loading multiple swf files on a page or Firefox bug.
Here's the outcome we need:
Two swf files on one page:
Header.swf: which holds the nav and some bling animation.
Map.swf: which has different provinces of the country highlighted on rollover. The active province is highlighted by reading the URL via Javascript and then loaded into the Map.swf via FlashVars.
In all of our other tests in other browsers, the scenario works very well but in Firefox 3.5.3 The swf files refuse to show.
We have stripped this test down to the bare minimum, one html page scenario and embedding it the same way using SWFObject 2.2 and this works in Firefox. When it is uploaded in DNN, the swf files refuse to show.
Is there anything anyone can think of?
Many thanks,
James
My first thought would be the way dnn renames element ids - and are you using client ids
If you could post some code it might help to look at it or a url to look at

Browser add-on to find a download's origin

Back in the earlier days of the internet I remember that in certain browsers, every time you downloaded an image or a file, the URL of where that file was downloaded from would be written into that file's properties (I guess the summary tab?). I think Netscape v2 did this if I remember correctly.
I really miss that kind of functionality as every once in a while I'll run into a neat little program stored somewhere in the depths of my hard drive and wonder where I got it from originally.
I googled around but I'm not quite sure what terms to use to describe what I'm looking for. So I'm wondering if anyone knows of a Firefox plug-in or something similar that would do this?
If you use the DownThemAll! extension for Firefox, you can tell it to prepend the URL of the site to the downloaded file name...
thus you end up with files like:
download.com_utils_compression_ABCD32.exe
It also works really well when you want to download/queue a bunch of files.
You download http://example.com/foo to ~/Desktop/foo, and you want to see the originating URL in the properties of the local file foo?
Back when I used OS X, I remember Safari used to record the original URL in the resource fork of the downloaded file. Can't remember what the named fork is, well, named, but it'll show up in the properties panel from Finder. Since it's there, Spotlight will probably index it, too, but I haven't used OS X since 10.3.
If you use Opera, and haven't cleared the file out from your download manager, select the download and it'll show the original URL that the file is from in the properties pane.
Is this what you want? If so... well, I don't know of a similar Firefox extension, but it'll clarify the question.
For the IE Browser I use the hell out of Fidler to look at all traffic going across the wire.
For FireFox, you can use the FireBug plugin. There is a "Net" tab that will show you request information that is going across the wire.
Most of the time you can use one of these tools to see what URL was requested in order to start a download. You can also view all the get and post information that might need to be sent in order to have your request succeed.
Fidler is here: http://www.fiddlertool.com/fiddler/
FireBug is here: https://addons.mozilla.org/en-US/firefox/addon/1843
Best of Luck!

Resources