Closed Bug 677510 Opened 13 years ago Closed 13 years ago

Video Controls buttons "Mute/unmute" and "Expand/Shrink" are lacking icons on HTML5 videos

Categories

(Core :: Audio/Video, defect)

6 Branch
defect
Not set
normal

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: sbadau, Unassigned)

Details

Attachments

(4 files)

Attached image screenshot
Mozilla/5.0 (Windows NT 5.1; rv:8.0a1) Gecko/20110808 Firefox/8.0a1

Video Controls buttons "Mute/unmute" and "Expand/Shrink" are lacking icons but retain functionality on HTML5 videos.

Reproducible: always

Steps to reproduce:
1. Go to http://www.youtube.com/html5 and enable the HTML5 Beta
2. Open http://www.youtube.com/watch?v=q-73zyousd4 and play with the video and its controls.

Actual results: 
"Mute/unmute" and "Expand/Shrink" buttons are not visible.

Expected result:
Video controls buttons should be visible.

Adding screenshot with the issue.
OS: Windows XP → All
Hardware: x86 → All
Component: HTML: Parser → Video/Audio
QA Contact: parser → video.audio
Attached file sample html
<html>
<head>
<style type ="text/css">

.container
{
border: 1px dashed red;
}

.button
{
padding:0;
height:30px;
border:none;
background:transparent;
}

.img
{
border-width:0;
height:100%;
background-repeat:no-repeat;

/* sized 25x25 */
background-image:url(data:image/png;base64,...... );
}

</style>
</head>
<body>
<div class="container">
  <button class="button">
    <img class="img" src="data:image/png;base64,..... " alt="1x1">
  </button>
</div>
</body>
</html>


Google Chrome works as expected ( An image is displayed ).
WORKAROUND:

.yt-uix-button-icon
{
width:25px
}


It seems that this is Youtube site issue.
Requesting tracking -- this may be a Tech Evangelism bug...
Attached file sample2 html
With attachment 551819 [details]
Comparison between Firefox and Chrome,
Appearance of the button element is different.
Does this also happen in the latest Firefox beta (firefox.com/beta)? FWIW I see bug 676666 only happens on Fx8/Nightly
(In reply to Christian Legnitto [:LegNeato] from comment #7)
> Does this also happen in the latest Firefox beta (firefox.com/beta)? FWIW I
> see bug 676666 only happens on Fx8/Nightly

need qa attention on firefox beta.  marking qawanted
Keywords: qawanted
I just updated to the most recent Fx6 beta and I'm seeing this bug. (The video linked in the first comment can't be found, according to Google, fwiw.)

This one plays, though: http://www.youtube.com/watch?v=7Y5jquULZug
(In reply to Wes Kocher (:KWierso) (Jetpack Bugmaster) from comment #9)
> I just updated to the most recent Fx6 beta and I'm seeing this bug. (The
> video linked in the first comment can't be found, according to Google, fwiw.)
> 
> This one plays, though: http://www.youtube.com/watch?v=7Y5jquULZug

Can you paste your User Agent in this bug?

You can get it from Help > Troubleshooting information.
Nevermind, I can confirm this happening on Mac:

1) Enable HTML5 video: http://www.youtube.com/html5
2) Play: http://www.youtube.com/watch?v=7Y5jquULZug

Build:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv.6.0) Gecko/20100101 Firefox/6.0 (2011080403150)
Using buildID=20110804030150 on Windows 7 ( Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0) I do not see the buttons when watching the video in Comment 9.

Google Chrome shows the buttons correctly when playing the video.
Does it work when setting the UA to chrome's?
When did this start failing? Do we have a regression range?
Also, how about Firefox 5's UA while running 6?
(In reply to Christian Legnitto [:LegNeato] from comment #13)
> Does it work when setting the UA to chrome's?
Not help

(In reply to Gavin Sharp from comment #14)
> When did this start failing? Do we have a regression range?
No regression range.
I guess this is caused by Youtube changes.

(In reply to Christian Legnitto [:LegNeato] from comment #15)
> Also, how about Firefox 5's UA while running 6?
Not help



I think this is caused by different handling of <button> element between Gecko and Webkit.
See Comment #5.

Component => layout

FYI, Appending &html5=1 plays as HTML5 video if it available.
http://www.youtube.com/watch?v=BRG5VNNUq_E&hd=1&html5=1
Component: Video/Audio → Layout
QA Contact: video.audio → layout
This does not happen on Firefox 3.5.9 and 3.6.19 so I think this is still potentially a Firefox regression.
Component: Layout → Video/Audio
Sending back to layout
Component: Video/Audio → Layout
Bug happens on Firefox 4.0.1
Component: Layout → Video/Audio
I tested this in Firefox 5.0.1. - Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0.1) Gecko/20100101 Firefox/5.0.1. The video plays fine there as long as I don't enable HTML video as a first step (http://www.youtube.com/html5) - as soon as I do I lose the icons.
(In reply to Alice0775 White from comment #4)
> Created attachment 551819 [details]
> sample2 html

Yeah, it looks like WebKit and Gecko have different ideas of what percentage height inside of a <button> means.  I don't think there's a relevant specification that defines <button> well enough to say which one, if either, is correct.  But *if* button is to be treated like an 'inline-block' then I think Gecko is correct.

WebKit is certainly buggy when resizing this testcase, though.  (The height gets adjusted when resizing smaller but not resizing larger; the width never gets adjusted when resizing.)
(In reply to Anthony Hughes (:ashughes) from comment #17)
> This does not happen on Firefox 3.5.9 and 3.6.19 so I think this is still
> potentially a Firefox regression.

Sure? It seems to playing with Flash player.
Please confirm which player is using 
* Right clicking on the video
Mozilla/5.0 (Windows NT 5.1; rv:6.0) Gecko/20100101 Firefox/6.0

I can't reproduce the issue from the description anymore. Tried on several HTML5 videos on different platforms (Windows XP, Windows 7, Mac OS X 10.6 and Ubuntu 11.04) with different Firefox versions (FF4.0, FF5.0, FF6.0b1, FF6.0b2, FF6.0b3, FF6.0b4, FF6.0b5). Video controls buttons "mute/unmute" and "expand/shrink" are now displayed.

The issue with the lack of the buttons in the two samples attached in Comment 1 and Comment 4 still persists though.
Confirmed.
http://hg.mozilla.org/releases/mozilla-release/rev/3ded311d93ad
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0.1) Gecko/20100101 Firefox/5.0.1 ID:20110707182747
http://hg.mozilla.org/releases/mozilla-beta/rev/b961763def47
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0 ID:20110804030150
http://hg.mozilla.org/releases/mozilla-aurora/rev/7894b27a5a9a
Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:5.0.1) Gecko/20100101 Firefox/7.0a2 ID:20110810042009
http://hg.mozilla.org/mozilla-central/rev/04dfb49d3a3d
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0a1) Gecko/20110810 Firefox/8.0a1 ID:20110810030738

Youtube added css width <for img> as follows . (like comment #2)

http://s.ytimg.com/yt/cssbin/www-player-vflAhWz-9.css:
.light-theme .html5-play-button,.light-theme .html5-pause-button,.light-theme .html5-play-button .yt-uix-button-icon,.light-theme .html5-pause-button .yt-uix-button-icon{width:32px}
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → WORKSFORME
Yay, thanks YouTube folks!
You need to log in before you can comment on or make changes to this bug.