mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 666306 - Added a large play button when the video is not autoplay and with controls enabled. r=dolske 

--HG--
rename : toolkit/themes/pinstripe/global/icons/tabprompts-bgtexture.png => toolkit/themes/pinstripe/global/media/clicktoplay-bgtexture.png
rename : toolkit/themes/winstripe/global/icons/tabprompts-bgtexture.png => toolkit/themes/winstripe/global/media/clicktoplay-bgtexture.png
This commit is contained in:
Jared Wein 2012-01-26 17:41:35 -08:00
Родитель 7ee8891a27
Коммит 08310ce269
9 изменённых файлов: 340 добавлений и 24 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

100
toolkit/content/widgets/videocontrols.xml
Просмотреть файл

@ -270,7 +270,10 @@
</vbox>
<vbox class="controlsOverlay">
<spacer class="controlsSpacer" flex="1"/>
<stack flex="1">
<spacer class="controlsSpacer" flex="1"/>
<box class="clickToPlay" hidden="true" flex="1"/>
</stack>
<hbox class="controlBar" hidden="true">
<button class="playButton"
playlabel="&playButton.playLabel;"
@ -328,6 +331,7 @@
bufferBar : null,
statusOverlay : null,
controlsSpacer : null,
clickToPlay : null,
stats : {},
fullscreenButton : null,
@ -344,6 +348,12 @@
isAudioOnly : false,
setupStatusFader : function(immediate) {
// Since the play button will be showing, we don't want to
// show the throbber behind it. The throbber here will
// only show if needed after the play button has been pressed.
if (!this.clickToPlay.hidden)
return;
var show = false;
if (this.video.seeking ||
this.video.error ||
@ -404,6 +414,9 @@
this.isAudioOnly = true;
}
if (this.isAudioOnly)
this.clickToPlay.hidden = true;
// If the first frame hasn't loaded, kick off a throbber fade-in.
if (this.video.readyState >= this.video.HAVE_CURRENT_DATA)
this.firstFrameShown = true;
@ -419,24 +432,20 @@
// Set the current status icon.
if (this.hasError()) {
this.clickToPlay.hidden = true;
this.statusIcon.setAttribute("type", "error");
this.updateErrorText();
this.setupStatusFader(true);
} else {
this.statusIcon.setAttribute("type", "throbber");
this.setupStatusFader();
}
// An event handler for |onresize| should be added when bug 227495 is fixed.
let controlBarWasHidden = this.controlBar.getAttribute("hidden") == "true";
this.controlBar.removeAttribute("hidden");
this.controlBar.hidden = false;
this._playButtonWidth = this.playButton.clientWidth;
this._durationLabelWidth = this.durationLabel.clientWidth;
this._muteButtonWidth = this.muteButton.clientWidth;
this._fullscreenButtonWidth = this.fullscreenButton.clientWidth;
this._controlBarHeight = this.controlBar.clientHeight;
if (controlBarWasHidden)
this.controlBar.setAttribute("hidden", "true");
this.controlBar.hidden = true;
this.adjustControlSize();
this._handleCustomEventsBound = this.handleCustomEvents.bind(this);
@ -481,6 +490,8 @@
this.setupStatusFader();
if (!this._triggeredByControls && this.dynamicControls && this.videocontrols.isTouchControl)
this.startFadeOut(this.controlBar);
if (!this._triggeredByControls)
this.clickToPlay.hidden = true;
this._triggeredByControls = false;
break;
case "pause":
@ -511,6 +522,7 @@
if (this.video instanceof HTMLVideoElement &&
(this.video.videoWidth == 0 || this.video.videoHeight == 0)) {
this.isAudioOnly = true;
this.clickToPlay.hidden = true;
this.startFadeIn(this.controlBar);
}
this.showDuration(Math.round(this.video.duration * 1000));
@ -596,12 +608,13 @@
// loading from child source elements, but we were unable to select
// any of the child elements for playback during resource selection.
if (this.hasError()) {
this.statusIcon.setAttribute("type", "error");
this.updateErrorText();
this.setupStatusFader(true);
// If video hasn't shown anything yet, disable the controls.
if (!this.firstFrameShown)
this.startFadeOut(this.controlBar);
this.clickToPlay.hidden = true;
this.statusIcon.setAttribute("type", "error");
this.updateErrorText();
this.setupStatusFader(true);
// If video hasn't shown anything yet, disable the controls.
if (!this.firstFrameShown)
this.startFadeOut(this.controlBar);
}
break;
default:
@ -809,11 +822,9 @@
return;
this.startFade(this.controlBar, true);
// Only hide the controls if the mouse cursor is not left on top of
// the control bar. We only need to check the Y position of the cursor
// since the controls span the width of the video and are always located
// at the bottom of the video.
if (event.clientY < this.controlBar.getBoundingClientRect().top) {
// Hide the controls if the mouse cursor is left on top of the video
// but above the control bar and if the click-to-play overlay is hidden.
if (event.clientY < this.controlBar.getBoundingClientRect().top && this.clickToPlay.hidden) {
this._hideControlsTimeout = setTimeout(this._hideControlsFn, this.HIDE_CONTROLS_TIMEOUT_MS);
}
},
@ -844,6 +855,10 @@
if (!isMouseOver) {
this.adjustControlSize();
// Keep the controls visible if the click-to-play is visible.
if (!this.clickToPlay.hidden)
return;
// Setting a timer here to handle the case where the mouse leaves
// the video from hovering over the controls.
@ -876,7 +891,7 @@
element.removeAttribute("immediate");
if (fadeIn) {
element.setAttribute("hidden", false);
element.hidden = false;
// force style resolution, so that transition begins
// when we remove the attribute.
element.clientTop;
@ -897,7 +912,7 @@
if (!element.hasAttribute("fadeout"))
return;
element.setAttribute("hidden", true);
element.hidden = true;
},
_triggeredByControls: false,
@ -949,6 +964,24 @@
this.fullscreenButton.removeAttribute("fullscreened");
},
handleClickToPlay : function () {
let videoHeight = this.video.clientHeight;
let videoWidth = this.video.clientWidth;
// The play button will animate to 3x its size. This
// shows the animation unless the video is too small
// to show 2/3 of the animation.
let animationScale = 2;
if (this._overlayPlayButtonHeight * animationScale > (videoHeight - this._controlBarHeight)||
this._overlayPlayButtonWidth * animationScale > videoWidth) {
this.clickToPlay.setAttribute("immediate", "true");
} else {
this.clickToPlay.removeAttribute("immediate");
}
this.clickToPlay.setAttribute("fadeout", "true");
this.togglePause();
},
setPlayButtonState : function(aPaused) {
if (aPaused)
this.playButton.setAttribute("paused", "true");
@ -1191,13 +1224,18 @@
_muteButtonWidth : 0,
_fullscreenButtonWidth : 0,
_controlBarHeight : 0,
_overlayPlayButtonHeight : 64,
_overlayPlayButtonWidth : 64,
adjustControlSize : function adjustControlSize() {
if (this.isAudioOnly)
return;
return;
let videoHeight = this.video.clientHeight;
let videoWidth = this.video.clientWidth;
if (this._overlayPlayButtonHeight > videoHeight || this._overlayPlayButtonWidth > videoWidth)
this.clickToPlay.hidden = true;
// The scrubber has |flex=1|, therefore |minScrubberWidth|
// was generated by empirical testing.
let minScrubberWidth = 25;
@ -1238,8 +1276,9 @@
this.positionLabel = document.getAnonymousElementByAttribute(binding, "class", "positionLabel");
this.statusOverlay = document.getAnonymousElementByAttribute(binding, "class", "statusOverlay");
this.statsOverlay = document.getAnonymousElementByAttribute(binding, "class", "statsOverlay");
this.controlsSpacer = document.getAnonymousElementByAttribute(binding, "class", "controlsSpacer");
this.fullscreenButton = document.getAnonymousElementByAttribute(binding, "class", "fullscreenButton");
this.controlsSpacer = document.getAnonymousElementByAttribute(binding, "class", "controlsSpacer");
this.clickToPlay = document.getAnonymousElementByAttribute(binding, "class", "clickToPlay");
this.fullscreenButton = document.getAnonymousElementByAttribute(binding, "class", "fullscreenButton");
this.statsTable = document.getAnonymousElementByAttribute(binding, "class", "statsTable");
this.stats.filename = document.getAnonymousElementByAttribute(binding, "class", "statFilename");
@ -1268,6 +1307,8 @@
//
// (Note: the |controls| attribute is already handled via layout/style/html.css)
var shouldShow = (!(this.video.autoplay && this.video.mozAutoplayEnabled) || !this.dynamicControls);
// Hide the overlay if the video time is non-zero or if an error occurred to workaround bug 718107.
this.startFade(this.clickToPlay, shouldShow && this.video.currentTime == 0 && !this.hasError(), true);
this.startFade(this.controlBar, shouldShow, true);
// Use the handleEvent() callback for all media events.
@ -1280,6 +1321,17 @@
this.muteButton.addEventListener("command", function() { self.toggleMute(); }, false);
this.playButton.addEventListener("command", function() { self.togglePause(); }, false);
this.fullscreenButton.addEventListener("command", function() { self.toggleFullscreen(); }, false );
this.clickToPlay.addEventListener("click", function clickToPlayClickHandler(e) {
if (e.button != 0 || self.hasError())
return;
// Read defaultPrevented asynchronously, since Web content
// may want to consume the "click" event but will only
// receive it after us.
setTimeout(function clickToPlayCallback() {
if (!e.defaultPrevented)
self.handleClickToPlay();
}, 0);
}, false);
this.controlsSpacer.addEventListener("click", function spacerClickHandler(e) {
if (e.button != 0 || self.hasError())

2
toolkit/themes/pinstripe/global/jar.mn
Просмотреть файл

@ -148,6 +148,8 @@ toolkit.jar:
skin/classic/global/media/throbber.png (media/throbber.png)
skin/classic/global/media/stalled.png (media/stalled.png)
skin/classic/global/media/volumeThumb.png (media/volumeThumb.png)
skin/classic/global/media/clicktoplay-bgtexture.png (media/clicktoplay-bgtexture.png)
skin/classic/global/media/videoClickToPlayButton.svg (media/videoClickToPlayButton.svg)
skin/classic/global/menu/menu-arrow.png (menu/menu-arrow.png)
skin/classic/global/menu/menu-check.png (menu/menu-check.png)
skin/classic/global/scale/scale-tray-horiz.gif (scale/scale-tray-horiz.gif)

Двоичные данные
toolkit/themes/pinstripe/global/media/clicktoplay-bgtexture.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 5.8 KiB

99
toolkit/themes/pinstripe/global/media/videoClickToPlayButton.svg Normal file
Просмотреть файл

@ -0,0 +1,99 @@
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="videoPlayButtonOverlay"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 64 64">
<defs>
<linearGradient id="whiteGradientStops">
<stop id="whiteGradientStop01" style="stop-color:#ffffff;stop-opacity:.95" offset="0" />
<stop id="whiteGradientStop02" style="stop-color:#ffffff;stop-opacity:.75" offset=".45" />
<stop id="whiteGradientStop03" style="stop-color:#ffffff;stop-opacity:.72" offset=".55" />
<stop id="whiteGradientStop04" style="stop-color:#ffffff;stop-opacity:.65" offset="1" />
</linearGradient>
<linearGradient
x1="32"
y1="0"
x2="32"
y2="62"
id="whiteGradient"
xlink:href="#whiteGradientStops"
gradientUnits="userSpaceOnUse" />
<linearGradient id="arrowGradientStops">
<stop id="arrowGradientStop01" style="stop-color:#333333;stop-opacity:.5" offset="0" />
<stop id="arrowGradientStop02" style="stop-color:#666666;stop-opacity:.5" offset="1" />
</linearGradient>
<linearGradient
x1="32"
y1="16"
x2="32"
y2="48"
id="arrowGradient"
xlink:href="#arrowGradientStops"
gradientUnits="userSpaceOnUse" />
<filter
x="-0.15"
y="-0.15"
width="1.25"
height="1.25"
color-interpolation-filters="sRGB"
id="dropShadow">
<feGaussianBlur
result="blur"
stdDeviation="2"
in="SourceAlpha"
id="dropShadowBlur" />
<feColorMatrix
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 .5 0"
type="matrix"
result="bluralpha"
id="dropShadowColor" />
<feOffset
result="offsetBlur"
dy="1"
dx="0"
in="bluralpha"
id="dropShadowOffset" />
<feMerge>
<feMergeNode
in="offsetBlur" />
<feMergeNode
in="SourceGraphic" />
</feMerge>
</filter>
<mask id="dropShadowMask">
<path
d="M47.285,29.991L23.75,16.24c-0.357-0.208-0.692-0.278-0.969-0.221 C22.32,16.114,22,16.555,22,17.251v27.5c0,1.112,0.797,1.568,1.75,1.011l23.535-13.749C48.238,31.458,48.238,30.546,47.285,29.991z M0,0v64h64V0H0z M32,59C16.536,59,4,46.464,4,31S16.536,3,32,3s28,12.536,28,28S47.464,59,32,59z"
id="dropShadowMaskPath"
style="fill:#ffffff;fill-opacity:1;stroke:none" />
</mask>
</defs>
<path
d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3z M47.285,32.013L23.75,45.762C22.797,46.319,22,45.863,22,44.751v-27.5c0-0.697,0.32-1.137,0.781-1.232 c0.277-0.058,0.612,0.012,0.969,0.221l23.535,13.751C48.238,30.546,48.238,31.458,47.285,32.013z"
mask="url(#dropShadowMask)"
id="playButtonShadow"
style="fill:black;fill-opacity:1;stroke:none;filter:url(#dropShadow)" />
<path
d="M22.781,16.019C22.32,16.114,22,16.555,22,17.251v27.5c0,1.112,0.797,1.568,1.75,1.011 l23.535-13.749c0.953-0.556,0.953-1.467,0-2.022L23.75,16.24C23.393,16.031,23.058,15.961,22.781,16.019z"
id="playButtonArrow"
style="fill:url(#arrowGradient);fill-opacity:1;stroke:none" />
<path
d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3z M47.285,32.013L23.75,45.762C22.797,46.319,22,45.863,22,44.751v-27.5c0-0.697,0.32-1.137,0.781-1.232 c0.277-0.058,0.612,0.012,0.969,0.221l23.535,13.751C48.238,30.546,48.238,31.458,47.285,32.013z"
id="playButton"
style="fill:url(#whiteGradient);fill-opacity:1;stroke:none" />
<path
d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3 z M32,58C17.112,58,5,45.888,5,31S17.112,4,32,4s27,12.112,27,27S46.888,58,32,58z M47.789,29.127l-23.534-13.75 C23.826,15.126,23.396,15,22.976,15c-0.135,0-0.27,0.014-0.398,0.041C21.62,15.238,21,16.106,21,17.251v27.5 C21,46.075,21.812,47,22.977,47c0.423,0,0.854-0.126,1.279-0.375L47.79,32.876c0.769-0.448,1.21-1.131,1.21-1.875 S48.559,29.576,47.789,29.127z M47.285,32.013L23.75,45.762C23.474,45.924,23.211,46,22.977,46C22.402,46,22,45.541,22,44.751v-27.5 c0-0.697,0.32-1.137,0.781-1.232L22.976,16c0.233,0,0.498,0.079,0.775,0.24l23.535,13.751 C48.238,30.546,48.238,31.458,47.285,32.013z"
id="playButtonEdgeHighlights"
style="fill:white;fill-opacity:.3;stroke:none" />
<path
d="M32,3C16.536,3,4,15.536,4,31c0,0.167,0.01,0.333,0.013,0.5C4.28,16.268,16.704,4,32,4 c15.296,0,27.72,12.268,27.987,27.5C59.99,31.333,60,31.167,60,31C60,15.536,47.464,3,32,3z M47.285,32.013L23.75,45.762 C22.797,46.319,22,45.863,22,44.751v1c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748c0.697-0.407,0.879-1.003,0.556-1.512 C47.723,31.688,47.541,31.864,47.285,32.013z"
id="playButtonTopEdgeHighlights"
style="fill:white;fill-opacity:.8;stroke:none" />
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 4.9 KiB

30
toolkit/themes/pinstripe/global/media/videocontrols.css
Просмотреть файл

@ -196,6 +196,24 @@
background: url(chrome://global/skin/media/error.png) no-repeat center;
}
/* Overlay Play button */
.clickToPlay {
width: 64px;
height: 64px;
-moz-box-pack: center;
-moz-box-align: center;
opacity: 0.7;
background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
url(chrome://global/skin/media/videoClickToPlayButton.svg);
background-repeat: repeat, no-repeat;
background-position: center, center;
background-size: auto, 64px 64px;
background-color: hsla(0,0%,10%,.5);
}
.clickToPlay:hover {
opacity: 1;
}
/* Statistics formatting */
html|*.statsDiv {
position: relative;
@ -222,6 +240,18 @@ html|table {
}
/* CSS Transitions */
.clickToPlay {
-moz-transition-property: opacity, background-size;
-moz-transition-duration: 400ms, 400ms;
}
.clickToPlay[fadeout] {
background-size: auto, 192px 192px;
opacity: 0;
}
.clickToPlay[fadeout][immediate] {
-moz-transition-property: opacity, background-size;
-moz-transition-duration: 0s, 0s;
}
.controlBar:not([immediate]) {
-moz-transition-property: opacity;
-moz-transition-duration: 200ms;

4
toolkit/themes/winstripe/global/jar.mn
Просмотреть файл

@ -152,6 +152,8 @@ toolkit.jar:
skin/classic/global/media/stalled.png (media/stalled.png)
skin/classic/global/media/volumeThumb.png (media/volumeThumb.png)
skin/classic/global/media/error.png (media/error.png)
skin/classic/global/media/clicktoplay-bgtexture.png (media/clicktoplay-bgtexture.png)
skin/classic/global/media/videoClickToPlayButton.svg (media/videoClickToPlayButton.svg)
skin/classic/global/printpreview/arrow-left.png (printpreview/arrow-left.png)
skin/classic/global/printpreview/arrow-left-end.png (printpreview/arrow-left-end.png)
skin/classic/global/printpreview/arrow-right.png (printpreview/arrow-right.png)
@ -326,6 +328,8 @@ toolkit.jar:
skin/classic/aero/global/media/stalled.png (media/stalled.png)
skin/classic/aero/global/media/volumeThumb.png (media/volumeThumb.png)
skin/classic/aero/global/media/error.png (media/error.png)
skin/classic/aero/global/media/clicktoplay-bgtexture.png (media/clicktoplay-bgtexture.png)
skin/classic/aero/global/media/videoClickToPlayButton.svg (media/videoClickToPlayButton.svg)
skin/classic/aero/global/printpreview/arrow-left.png (printpreview/arrow-left-aero.png)
skin/classic/aero/global/printpreview/arrow-left-end.png (printpreview/arrow-left-end-aero.png)
skin/classic/aero/global/printpreview/arrow-right.png (printpreview/arrow-right-aero.png)

Двоичные данные
toolkit/themes/winstripe/global/media/clicktoplay-bgtexture.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.7 KiB

99
toolkit/themes/winstripe/global/media/videoClickToPlayButton.svg Normal file
Просмотреть файл

@ -0,0 +1,99 @@
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="videoPlayButtonOverlay"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 64 64">
<defs>
<linearGradient id="whiteGradientStops">
<stop id="whiteGradientStop01" style="stop-color:#ffffff;stop-opacity:.95" offset="0" />
<stop id="whiteGradientStop02" style="stop-color:#ffffff;stop-opacity:.75" offset=".45" />
<stop id="whiteGradientStop03" style="stop-color:#ffffff;stop-opacity:.72" offset=".55" />
<stop id="whiteGradientStop04" style="stop-color:#ffffff;stop-opacity:.65" offset="1" />
</linearGradient>
<linearGradient
x1="32"
y1="0"
x2="32"
y2="62"
id="whiteGradient"
xlink:href="#whiteGradientStops"
gradientUnits="userSpaceOnUse" />
<linearGradient id="arrowGradientStops">
<stop id="arrowGradientStop01" style="stop-color:#333333;stop-opacity:.5" offset="0" />
<stop id="arrowGradientStop02" style="stop-color:#666666;stop-opacity:.5" offset="1" />
</linearGradient>
<linearGradient
x1="32"
y1="16"
x2="32"
y2="48"
id="arrowGradient"
xlink:href="#arrowGradientStops"
gradientUnits="userSpaceOnUse" />
<filter
x="-0.15"
y="-0.15"
width="1.25"
height="1.25"
color-interpolation-filters="sRGB"
id="dropShadow">
<feGaussianBlur
result="blur"
stdDeviation="2"
in="SourceAlpha"
id="dropShadowBlur" />
<feColorMatrix
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 .5 0"
type="matrix"
result="bluralpha"
id="dropShadowColor" />
<feOffset
result="offsetBlur"
dy="1"
dx="0"
in="bluralpha"
id="dropShadowOffset" />
<feMerge>
<feMergeNode
in="offsetBlur" />
<feMergeNode
in="SourceGraphic" />
</feMerge>
</filter>
<mask id="dropShadowMask">
<path
d="M47.285,29.991L23.75,16.24c-0.357-0.208-0.692-0.278-0.969-0.221 C22.32,16.114,22,16.555,22,17.251v27.5c0,1.112,0.797,1.568,1.75,1.011l23.535-13.749C48.238,31.458,48.238,30.546,47.285,29.991z M0,0v64h64V0H0z M32,59C16.536,59,4,46.464,4,31S16.536,3,32,3s28,12.536,28,28S47.464,59,32,59z"
id="dropShadowMaskPath"
style="fill:#ffffff;fill-opacity:1;stroke:none" />
</mask>
</defs>
<path
d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3z M47.285,32.013L23.75,45.762C22.797,46.319,22,45.863,22,44.751v-27.5c0-0.697,0.32-1.137,0.781-1.232 c0.277-0.058,0.612,0.012,0.969,0.221l23.535,13.751C48.238,30.546,48.238,31.458,47.285,32.013z"
mask="url(#dropShadowMask)"
id="playButtonShadow"
style="fill:black;fill-opacity:1;stroke:none;filter:url(#dropShadow)" />
<path
d="M22.781,16.019C22.32,16.114,22,16.555,22,17.251v27.5c0,1.112,0.797,1.568,1.75,1.011 l23.535-13.749c0.953-0.556,0.953-1.467,0-2.022L23.75,16.24C23.393,16.031,23.058,15.961,22.781,16.019z"
id="playButtonArrow"
style="fill:url(#arrowGradient);fill-opacity:1;stroke:none" />
<path
d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3z M47.285,32.013L23.75,45.762C22.797,46.319,22,45.863,22,44.751v-27.5c0-0.697,0.32-1.137,0.781-1.232 c0.277-0.058,0.612,0.012,0.969,0.221l23.535,13.751C48.238,30.546,48.238,31.458,47.285,32.013z"
id="playButton"
style="fill:url(#whiteGradient);fill-opacity:1;stroke:none" />
<path
d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3 z M32,58C17.112,58,5,45.888,5,31S17.112,4,32,4s27,12.112,27,27S46.888,58,32,58z M47.789,29.127l-23.534-13.75 C23.826,15.126,23.396,15,22.976,15c-0.135,0-0.27,0.014-0.398,0.041C21.62,15.238,21,16.106,21,17.251v27.5 C21,46.075,21.812,47,22.977,47c0.423,0,0.854-0.126,1.279-0.375L47.79,32.876c0.769-0.448,1.21-1.131,1.21-1.875 S48.559,29.576,47.789,29.127z M47.285,32.013L23.75,45.762C23.474,45.924,23.211,46,22.977,46C22.402,46,22,45.541,22,44.751v-27.5 c0-0.697,0.32-1.137,0.781-1.232L22.976,16c0.233,0,0.498,0.079,0.775,0.24l23.535,13.751 C48.238,30.546,48.238,31.458,47.285,32.013z"
id="playButtonEdgeHighlights"
style="fill:white;fill-opacity:.3;stroke:none" />
<path
d="M32,3C16.536,3,4,15.536,4,31c0,0.167,0.01,0.333,0.013,0.5C4.28,16.268,16.704,4,32,4 c15.296,0,27.72,12.268,27.987,27.5C59.99,31.333,60,31.167,60,31C60,15.536,47.464,3,32,3z M47.285,32.013L23.75,45.762 C22.797,46.319,22,45.863,22,44.751v1c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748c0.697-0.407,0.879-1.003,0.556-1.512 C47.723,31.688,47.541,31.864,47.285,32.013z"
id="playButtonTopEdgeHighlights"
style="fill:white;fill-opacity:.8;stroke:none" />
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 4.9 KiB

30
toolkit/themes/winstripe/global/media/videocontrols.css
Просмотреть файл

@ -205,6 +205,24 @@
background: url(chrome://global/skin/media/error.png) no-repeat center;
}
/* Overlay Play button */
.clickToPlay {
width: 64px;
height: 64px;
-moz-box-pack: center;
-moz-box-align: center;
opacity: 0.7;
background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
url(chrome://global/skin/media/videoClickToPlayButton.svg);
background-repeat: repeat, no-repeat;
background-position: center, center;
background-size: auto, 64px 64px;
background-color: hsla(0,0%,10%,.5);
}
.clickToPlay:hover {
opacity: 1;
}
/* Statistics formatting */
html|*.statsDiv {
position: relative;
@ -231,6 +249,18 @@ html|table {
}
/* CSS Transitions */
.clickToPlay {
-moz-transition-property: opacity, background-size;
-moz-transition-duration: 400ms, 400ms;
}
.clickToPlay[fadeout] {
background-size: auto, 192px 192px;
opacity: 0;
}
.clickToPlay[fadeout][immediate] {
-moz-transition-property: opacity, background-size;
-moz-transition-duration: 0s, 0s;
}
.controlBar:not([immediate]) {
-moz-transition-property: opacity;
-moz-transition-duration: 200ms;