HTML5 MP3 Player Support Product Page

Solved

Custom MP3 player works in all browsers apart from Internet Explorer 9

Reported 16 Jan 2013 18:52:49
1
has this problem
16 Jan 2013 18:52:49 Pete Manning posted:
Hi,

I have created a custom mp3 player which works fine in Firefox, Chrome etc but does not work in IE9.

I updated to version 1.0.9 of the Mp3 HTMl5 player in the hope that now it supports IE10 that it would work but it does not.

quoling.com/mp3playerie9/mp3player.html is a cutdown version of the player which only consists of a image and 4 apdivs for the button classes - pre, stop, play, next - open in firefox/chrome and this will work, open in IE9 and it does not.

Please advise.

Thanks

Pete

Replies

Replied 17 Jan 2013 07:56:55
17 Jan 2013 07:56:55 Vulcho Vulev replied:
Hello Pete.

Seems like you didn't inserted HTML5 MP3 Player Region when the extension prompted for one.
Please reinsert the extension and when customizing the player with your skin note that
<div class="dmxHTML5MP3PlayerControlbar"> is required.

Regards:Vulcho.
Replied 17 Jan 2013 08:31:26
17 Jan 2013 08:31:26 Pete Manning replied:
Hi Vulcho,

I am not prompted for a region!
I add a div and then within that div add the mp3 player at no point am I prompted for a region. I added the playercontrolbar manually but it makes no difference.

Ie9 and ie10 do not work.

Can you perhaps give me more detail as to where the controlbar should be put within the code?

Thanks

Pete
Replied 17 Jan 2013 08:57:29
17 Jan 2013 08:57:29 Vulcho Vulev replied:
Pete can you switch your doctype to XHTML 1.0 Transitional currently my IE is responding with invalid doctype.

<!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" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
Replied 17 Jan 2013 09:12:55
17 Jan 2013 09:12:55 Pete Manning replied:
Hi Vulcho,

I have done this, I was doing some testing which is why it was not set like that.

For some reason I am not getting any email notifications for your replies, so apologies for any delay.

Thanks

Pete
Replied 17 Jan 2013 13:03:25
17 Jan 2013 13:03:25 Vulcho Vulev replied:
Hello Pete.

Please use the Image Map option and for each mapped region set play, stop, next, prev with tag inspector>behaviors.

Regards:Vulcho.
Replied 17 Jan 2013 13:29:53
17 Jan 2013 13:29:53 Pete Manning replied:
Hi Vulcho,

I'm sorry but I am not sure I understand what you are referring to - what is the "image map" option and what are the tag inspector -> behaviours?

Could you please expand on the details? is there a tutorial I could watch?

Thanks

Pete
Replied 17 Jan 2013 13:33:18
17 Jan 2013 13:33:18 Pete Manning replied:
Do you mean using the behaviours?

I would like to understand why this works in other browsers but not IE?

Thanks

Pete
Replied 17 Jan 2013 14:14:54
17 Jan 2013 14:14:54 Teodor Kuduschiev replied:
Hello,

It is because of your layout and the way you are using your image, empty AP divs, z-indexes inside the div containing the player.... This confuses IE

You should either apply your image as a background image for the div and use those empty divs there or use the Image Map options ... help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c15a.html Then using behaviors apply the play controls to each of the hotspots.
Replied 17 Jan 2013 14:25:29
17 Jan 2013 14:25:29 Pete Manning replied:
Fantastic! - Thanks Teo! -good old MS! - I will get it resolved tonight.

Thanks again

Pete
Replied 17 Jan 2013 15:06:01
17 Jan 2013 15:06:01 Pete Manning replied:
Thanks Teo and Vulcho, I have just changed the image to be the background of the div and it works fine with IE10.

thanks again

Pete

Reply to this topic