Video controls not showing

[kyleziegler]

The video control icons do not show on the videos. Specifically the small play button (bottom left), large play button (center), and the volume and maximize controls located bottom right. See my attached images for clarification.

You will see this problem in every browser as the wrong file is being referenced.

Patch: Change the SVG images to PNG within the mediaelementplayer.min.css

[kyleziegler]

After Patch

[kyleziegler]

Before Patch

[kyleziegler]

Files to change

[Ipstenu]

Cannot reproduce on 3.6 with Chrome.

You're looking at the about page, right?

​http://cl.ly/image/0a2U3t3O0S3u

Looks like it should. So do all embeds on my sites.

[SergeyBiryukov]

Could not reproduce either. Tested in Firefox 23 (Windows and Mac OS X), Chrome 29 (Windows and Mac OS X), IE 8 (Windows), Opera 12 (Mac OS X), Opera 15 (Windows).

[kyleziegler]

@ipstenu Yes, I was looking at the about page regarding the 3.6 release.

That's odd that both of you cannot replicate the issue, my company wouldn't have changed that file so I figured it was from a Wordpress update. We updated to 3.6 the other week, we should get some more people to test this though.

[Ipstenu]

What browser/OS is this happening on?

[ocean90]

Can you please check if this helps? ​http://wordpress.org/support/topic/audio-player-buttons-dont-show-up?replies=14#post-4144142

[kyleziegler]

@Ipstenu I was on W7, I personally tested FF 23, IE 10, and Chrome 29.x. We also tested it on FF23 and Safari 6.x for OSX 10.8

@ocean90 I took a glance at that post. I should've tested the issue in IE8 and see if it worked, I could undo my patch and test that if it's necessary?

Side notes: We own our servers

[SergeyBiryukov]

What happens if you open those .svg files in a browser directly? Does adding the image/svg+xml mime type to .htaccess (as described in the topic) fix it?

[kyleziegler]

@SergeyBiryukov I believe that .svg is a defined file type on our servers. Although I'll still need to undo the patch and test that. Could anyone remove the image/svg+xml from their .htaccess file and see if they get the same issue as us?

[SergeyBiryukov]

Replying to kyleziegler:

Could anyone remove the image/svg+xml from their .htaccess file and see if they get the same issue as us?

I don't have image/svg+xml in my .htaccess file, however I've found it in conf/mime.types, commented it out and restarted the server. bigplay.svg and controls.svg were then served as text/html, and I was able to reproduce the issue.

Looks like MediaElement uses .svg files for Retina displays:
​https://github.com/johndyer/mediaelement/commit/e3ab5e18b4f3755de7b0f1c339c9f462b3be59f4

This appears to be a server configuration issue, not sure if we can do anything here, or should report it upstream.

[kyleziegler]

@SergeyBiryukov That's great I was hoping I wasn't the only one with the issue. Although like someone else noted, most individuals aren't in a position to add mime types to their server or edit the MediaElement style sheets.

[SergeyBiryukov]

Related: #26591

[johnbillion]

This is the same issue as #26591