Fandom Developers Wiki
Advertisement

OggPlayer jest skryptem ułatwiającym odtwarzanie plików Ogg. Posiada on dwie funkcje:

  • Usuwa przycisk i inicjuje wszystkie odtwarzacze dla plików Ogg (zarówno audio jak i wideo) dodane w wikitekście.
  • Umożliwia dodanie prostego odtwarzacza audio w formie przycisku.

Uwaga: skrypt nie naprawia brakującego wsparcia dla formatu Ogg w niektórych przeglądarkach (jak Safari).

Instalacja[]

Odtwarzacze[]

Domyślnie wszystkie pliki w formacie Ogg dodane jak obrazy ([[File:Jakiś plik.ogv]]) generują przycisk który inicjuje odtwarzacz i miniaturę, jeśli plik jest filmem. Skrypt usuwa konieczność kliknięcie przycisku w celu wyświetlenia się odtwarzacza (w niektórych przypadkach zmienia także układ strony). Ponadto usuwa on link „⧼ogg-more⧽”.

Automatyczna inicjacja odtwarzacza jest opcjonalna i może zostać wyłączona, jeśli chcesz używać tylko przycisku opisanego poniżej. Aby to zrobić dodaj to do MediaWiki:Common.js na swojej wiki:

var oggPlayerButtonOnly = false;

Przycisk[]

Ta funkcja umożliwia stworzenie pojedynczego przycisku, który po kliknięciu zacznie odtwarzać dźwięk. Może również zostać zatrzymany poprzez ponowne kliknięcie. Jeśli na stronie znajduje się wiele przycisków to kliknięcie jednego spowoduje zatrzymanie odtwarzania dowolnego innego przycisku. Istnieje wiele możliwości na dodanie przycisku w zależności od potrzeby.

There are multiple ways to insert it, whichever works best:

<span class="audio-button">[[File:Jakiś dźwięk.ogg]]</span> <!-- odtwarzacz -->
<span class="audio-button">[[Media:Jakiś dźwięk.ogg]]</span> <!-- a media link -->
<span class="audio-button" data-src="https://.../Jakiś_dźwięk.ogg"></span> <!-- a direct link -->
Uwaga: Możesz użyć {{filepath:Jakiś dźwięk.ogg}} w parametrze data-src
Uwaga: Zadziałają tylko pliki hostowane na serwerach Fandomu i Wikimedii z rozszerzeniami .ogg, .ogs lub .ogv.

Personalizacja[]

Jeśli chcesz zmienić wygląd przycisku możesz skorzystać ze styli wewnątrz linii oraz z następujących klas CSS:

audio-button
mają ją wszystkie przyciski
now-playing
gdy przycisk aktualnie odtwarza dźwięk
no-audio
gdy nie ma dźwięku dla przycisku lub przeglądarka nie wspiera formatu Ogg

Inne uwagi[]

  • Możesz dodać klasę click-parent aby przycisk odtwarzał dźwięk gdy jego element-rodzic jest kliknięty (np. cała komórka tabeli).
  • You can add the focusable class to make the button be focusable when navigating with the Tab key and press the Space or Enter keys to play/pause.
  • Everything inside the .audio-button will be removed.

Alternative[]

The javascript is not functional on mobile skin due to customization restrictions. If mobile-compatibility is desired, the extension AudioButton can be requested to be enabled via contacting staffs. In order to achieve the same design as the OggPlayer, copy-paste the following CSS to both the desktop CSS page (MediaWiki:Common.css) and the mobile CSS page (MediaWiki:FandomMobile.css) of the wiki.

.ext-audiobutton::before {
	display: none;
}

/*
  Forked from OggPlayer on Fandom Developers Wiki
  https://dev.fandom.com/wiki/OggPlayer
*/

/* Used files: [[File:OggPlayer play.svg]] [[File:OggPlayer stop.svg]] [[File:OggPlayer mute.svg]] */

.ext-audiobutton {
    display: inline-block;
    vertical-align: -0.1em;
    width: 1em;
    height: 1em;
    overflow: hidden;
    border-radius: 3px;
    background-color: #006cb0;
    transition: background-color .2s;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('https://vignette.wikia.nocookie.net/dev/images/d/d6/OggPlayer_play.svg');
}
.ext-audiobutton[data-state="pause"],
.ext-audiobutton:hover {
    background-color: #b30000;
}
.ext-audiobutton[data-state="pause"] {
    background-image: url('https://vignette.wikia.nocookie.net/dev/images/a/a9/OggPlayer_stop.svg');
}
.ext-audiobutton[data-state="error"] {
    cursor: help;
    background-color: #b30000;
    background-image: url('https://vignette.wikia.nocookie.net/dev/images/a/ae/OggPlayer_mute.svg');
}
Advertisement