Last modified: 2011-05-15 09:51:35 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T21915, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 19915 - <audio> controls size too big
<audio> controls size too big
Status: RESOLVED WONTFIX
Product: MediaWiki extensions
Classification: Unclassified
OggHandler (Other open bugs)
unspecified
All All
: Normal major (vote)
: ---
Assigned To: Michael Dale
http://commons.wikimedia.org/wiki/Cat...
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2009-07-25 00:10 UTC by Alvaro
Modified: 2011-05-15 09:51 UTC (History)
5 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Alvaro 2009-07-25 00:10:44 UTC
In browsers supporting <audio> (e.g. Firefox 3.5, Chrome), the controls appear too large, breaking page layout. In Firefox playback starts with an annoying "buffering" animation that temporarily makes the controls higher, further breaking layout.

Here is a good example:
http://commons.wikimedia.org/wiki/Category:Bassoon_music

Or here, in the infobox:
http://en.wikipedia.org/wiki/While_My_Guitar_Gently_Weeps

The size of this control bar can be set with CSS:

 <audio style="width:100px;height:28px" src=...></audio>

(works in Chrome and Firefox at least)

I recommend the 28px height because it looks fine (the controls are not clipped) and the FF buffering animation is hidden.
Comment 1 Brion Vibber 2009-08-10 17:28:45 UTC
Moving to OggHandler, assigning to Michael Dale as part of video UI rework...
Comment 2 Nick 2010-04-11 08:00:02 UTC
I have found the source of this problem as well as a simple workaround:

The reason this happens is because the <audio> tag specification does not support resizing, while the <video> tag specification does. As Firefox, Chrome and Opera all follow this specification, neither of the three support <audio> resizing, however <video> resizing works fine.

Therefore, the simply workaround is to simple use <video> instead of <audio>, since they both use the exact same backend to handle content.

In /extensions/OggHandler/oggPlayer.js

Change line 558 from
var tagName = params.isVideo ? 'video' : 'audio';
to
var tagName = 'video';

It's a workaround, but it helps. I have tested this on my private mediawiki and now Firefox is completely fixed, Chrome resizes correctly but handles the player itself weirdly (but I assume this is a fault on the side of Chrome), however Opera still acts the way it did before the change (but this is a fault on the side of Opera now, not the specifications).
Comment 3 Sven Manguard 2011-03-15 01:58:01 UTC
Great news. Let's do this then! Sound implementation on Wikipedia leaves much
to be desired, but this is near the top of my list of issues with it. Fixing it
would be just wonderful.
Comment 4 Michael Dale 2011-03-15 02:35:18 UTC
TimedMediaHandler has an html5 audio ui which gets around the native size issues of the browsers native audio players.
Comment 5 Mark A. Hershberger 2011-04-14 18:41:33 UTC
(In reply to comment #4)
> TimedMediaHandler has an html5 audio ui which gets around the native size
> issues of the browsers native audio players.

Does that mean this is fixed, then?
Comment 6 Michael Dale 2011-04-15 18:30:53 UTC
It should be marked as wontfix "bug" with OggHandler since its big bug to build an html player and that "big bug" is addressed by the feature set of the TimedMediaHandler extension. 

TimedMediaHandler updates the video tag output with an HTML player that is more adaptive to custom sizes.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links