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).
Installation
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 parametrzedata-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-parentaby przycisk odtwarzał dźwięk gdy jego element-rodzic jest kliknięty (np. cała komórka tabeli). - You can add the
focusableclass to make the button be focusable when navigating with theTabkey and press theSpaceorEnterkeys to play/pause. - Everything inside the
.audio-buttonwill 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');
}