HTML dla symbolu pauzy w sterowaniu audio i wideo

97

Próbuję znaleźć symbol Unicode, aby przycisk wyświetlał symbol pauzy Unicode. Udało mi się znaleźć, że symbol odtwarzania Unicode to, &#9658ale szukam odpowiednika symbolu pauzy Unicode.

html unicode special-characters symbols user3081307
źródło
1
Miałem to samo pytanie, ale z przyciskiem „Stop” (kwadrat). Odpowiedź Roko była najlepsza do tego.
starmandeluxe

Odpowiedzi:

106

Istnieje wiele symboli, które można uznać za odpowiednie zamienniki, w tym:

  1. | | - dwa standardowe (pogrubione) pionowe paski.

  2. ▋▋ - ▋i jeszcze jedno▋

  3. ▌▌ - ▌i jeszcze jedno▌

  4. ▍▍ - ▍i jeszcze jedno▍

  5. ▎▎ - ▎i jeszcze jedno▎

  6. ❚❚ - ❚i jeszcze jedno❚

Mogłem przegapić jedną lub dwie, ale myślę, że te są lepsze. Oto lista symboli na wszelki wypadek.

dsgriffin
źródło
Użyłem tego: 𝍪.
JoshuaD
& # 9646; jest prawdziwym symbolem pauzy w HTML.
Fla
@JoshuaD, jeśli chcesz obsługiwać wiele przeglądarek, prawdopodobnie nie powinieneś używać tej. Używam najnowszej przeglądarki Firefox i jest nieczytelna.
A Child of God
3
Używałem =z transform:rotate(90deg);.
Joe DF
1
@AChildofGod - nie chodzi (tylko) o przeglądarkę, zależy to od czcionek zainstalowanych na Twoim komputerze.
kubi
176

Standard Unicode dla symboli sterowania multimediami

Pauza: ⏸︎

Unicode standardowa 13,0 (aktualizacja 2020) dostarcza Różne znaki techniczne glifów w zakresie HEX 2300-23FF

Różne techniczne

Biorąc pod uwagę obszerną dokumentację Unicode 13.0 , niektóre glify, które możemy powiązać z popularnymi symbolami sterowania multimediami , wyglądałyby następująco:

Symbole klawiatury i interfejsu użytkownika

23CF ⏏︎ Wysuń nośnik

Symbole interfejsu użytkownika

23E9 ⏩︎ przewijanie do przodu
23EA ⏪︎ przewijanie do tyłu, przewijanie do tyłu
23EB ⏫︎ szybkie zwiększanie
23EC ⏬︎ szybkie zmniejszanie
23ED ⏭︎ przeskakiwanie do końca, następne
23EE ⏮︎ przejście do początku, poprzedni
23EF ⏯︎ przełączanie odtwarzania / pauzy
23F1 ⏱︎ stoper
23F2 ⏲︎ zegar
23F3 ⏳︎ klepsydra
23F4 ⏴ ︎ do tyłu, do tyłu
23F5 ⏵︎ do przodu, dalej, odtwórz
23F6 ⏶︎ zwiększ
23F7 ⏷︎ zmniejsz
23F8 ⏸︎ pauza
23F9 ⏹︎ zatrzymaj
23FA ⏺︎ zapis

Symbole mocy z ISO 7000: 2012

23FB ⏻︎ tryb gotowości / zasilanie
23FC ⏼︎ włączanie / wyłączanie
23FD ⏽︎ włączanie
2B58 ⭘︎ wyłączanie

Symbol zasilania z IEEE 1621-2004

23FE ⏾︎ moc snu

Użyj w sieci:

Plik należy zapisać przy użyciu kodowania UTF-8 bez BOM (które w większości środowisk programistycznych jest ustawione domyślnie), aby poinstruować parser, jak poprawnie przekształcić bajty w znaki. <meta charset="utf-8"/>powinno być używane bezpośrednio po <head>w pliku HTML i upewnij się, że Content-Type: text/html; charset=utf-8ustawione są prawidłowe nagłówki HTTP .

Przykłady:

HTML 
&#x23E9; Pictograph 
&#x23E9;&#xFE0E; Standardized Variant
CSS 
.icon-ff:before { content: "\23E9" }
.icon-ff--standard:before { content: "\23E9\FE0E" }
JavaScript 
EL_iconFF.textContent = "\u23E9";
EL_iconFF_standard.textContent = "\u23E9\uFE0E"

Wersja znormalizowana

Aby zapobiec glif od bycia „kolor emojified” ⏩︎ / ⏩ dołączająca kod U + FE0E Tekst Selektor Przedstawienie zażądać wariant standardowej (na przykład: &#x23e9;&#xfe0e;)

Niespójności

Znaki z zakresu Unicode są wrażliwe na środowisko rodziny czcionek, z którego są używane, aplikację, przeglądarkę, system operacyjny, platformę.
Gdy nieznane lub brakujące - zamiast tego możemy zobaczyć symbole takie jak lub ▯, a nawet niespójne zachowanie z powodu różnic w implementacjach parsera HTML przez różnych dostawców.
Na przykład w przeglądarkach Windows Chromium przyrostek Standardized Variant U + FE0E jest błędny, a takim symbolom nadal lepiej towarzyszy CSS, tj .: font-family: "Segoe UI Symbol"wymuszenie tej konkretnej czcionki na kolorowym emoji (zwykle rozpoznawanym jako „Segoe UI Emoji”) - co przeczy cel U + FE0E na pierwszym miejscu - czas pokaże…

Skalowalne czcionki ikon

Aby obejść problemy związane z nieobsługiwanymi znakami - dobrym rozwiązaniem jest użycie skalowalnych zestawów czcionek ikon, takich jak np .:

Font Awesome

Ikony graczy - skalowalne - niesamowite czcionki

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-arrows-alt"></i>
<i class="fa fa-backward"></i>
<i class="fa fa-compress"></i>
<i class="fa fa-eject"></i>
<i class="fa fa-expand"></i>
<i class="fa fa-fast-backward"></i>
<i class="fa fa-fast-forward"></i>
<i class="fa fa-forward"></i>
<i class="fa fa-pause"></i>
<i class="fa fa-play"></i>
<i class="fa fa-play-circle"></i>
<i class="fa fa-play-circle-o"></i>
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
<i class="fa fa-stop"></i>
<i class="fa fa-youtube-play"></i>
Rozwiń fragment

Ikony Google

wprowadź opis obrazu tutaj

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">pause</i>
<i class="material-icons">pause_circle_filled</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">fast_forward</i>
<i class="material-icons">fast_rewind</i>
<i class="material-icons">fiber_manual_record</i>
<i class="material-icons">play_arrow</i>
<i class="material-icons">play_circle_filled</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">skip_next</i>
<i class="material-icons">skip_previous</i>
<i class="material-icons">replay</i>
<i class="material-icons">repeat</i>
<i class="material-icons">stop</i>
<i class="material-icons">loop</i>
<i class="material-icons">mic</i>
<i class="material-icons">volume_up</i>
<i class="material-icons">volume_down</i>
<i class="material-icons">volume_mute</i>
<i class="material-icons">volume_off</i>
Rozwiń fragment

i wiele innych, które można znaleźć na wolności; i wreszcie to naprawdę przydatne narzędzie online: generator czcionek i ikon, Icomoon.io .

Roko C. Buljan
źródło
2
Dziękuję kolego, bardzo pomocna odpowiedź.
Daniel Barde
1
Irytująco nie ma przycisku „zakreślonego zatrzymania” w czcionce / ikonach Google, więc ich zestaw „odtwarzania w kółku” i „wstrzymania w kółku” jest niekompletny ...
Fizz
1
@Fizz github.com/google/material-design-icons/issues/851
Roko C. Buljan
Niesamowita odpowiedź - uwielbiam włożony w nią wysiłek Czy zauważyłeś oficjalny „Symbol ISO 7000 / IEC 60417 dla pauzy; przerwanie to # 5111B. Zobacz Media_Controls”, na który wskazał @intotecho w tej niedocenianej odpowiedzi? → stackoverflow.com/a/48918561/4575793
Cadoiz
58

Przydać się mogą:

  • ⏩ &#x23e9;
  • ⏪ &#x23ea;
  • ⏫ &#x24eb;
  • ⏬ &#x23ec;
  • ⏭ &#x23ed;
  • ⏮ &#x23ee;
  • ⏯ &#x23ef;
  • ⏴ &#x23f4;
  • ⏵ &#x23f5;
  • ⏶ &#x23f6;
  • ⏷ &#x23f7;
  • ⏸ &#x23f8;
  • ⏹ &#x23f9;
  • ⏺ &#x23fa;

UWAGA : najwyraźniej te znaki nie są zbyt dobrze obsługiwane w popularnych czcionkach, więc jeśli planujesz ich używać w Internecie, wybierz czcionkę internetową, która je obsługuje.

rr-
źródło
28

▐▐ jest HTML i jest wykonana z tego kodu: &#9616;&#9616;.

Oto przykład JSFiddle.

marcusmichaels
źródło
22

Znalazłem go, jest w bloku Różne techniczne. ⏸ (U + 23F8)

birtannic124
źródło
3
Nie jestem pewien, jak została odrzucona właściwa odpowiedź. Zobacz łącze poniżej, gdzie ten „podwójny pionowy pasek” jest również oznaczany jako „pauza” w komentarzach. Szkoda, że ​​nie wydaje się być dobrze obsługiwany przez czcionki (dodane do Unicode w czerwcu 2014). fileformat.info/info/unicode/char/23f8/index.htm
Anm,
12

Używam ▐ ▌

HTML: &#9616;&nbsp;&#9612;

CSS: \2590\A0\258C

Nathan Goings
źródło
5

Jeśli chcesz, aby pojedynczy znak pasował do trójkąta skierowanego w prawo w celu „odtwarzania”, wypróbuj cyfrę rzymską 2. &#8545;in jest w formacie HTML. Jeśli możesz umieścić wokół niego tagi formatujące, wygląda to naprawdę dobrze, pogrubione. Ⅱ jest <b>&#8545;</b>w formacie HTML. Ma to znacznie lepsze wsparcie niż wspomniany wcześniej podwójny pionowy pasek.

StarCrashr
źródło
Cieszę się, że wspomniałeś o odważnym. Używam & # 2405; i wygląda lepiej pogrubioną czcionką.
efreed
5

Nowoczesne przeglądarki obsługują również opcję „DOUBLE VERTICAL BAR” (U + 23F8):

http://www.fileformat.info/info/unicode/char/23f8/index.htm

W przypadku odtwarzacza muzycznego może działać jako towarzysz `` CZARNEGO WSKAŹNIKA W PRAWO '' (U + 25BA), ponieważ oba mają równą szerokość i wysokość, dzięki czemu idealnie nadają się do przycisku odtwarzania / pauzy:

http://www.fileformat.info/info/unicode/char/25ba/index.htm

Midzer
źródło
1
Na Macu podwójny pionowy pasek jest otoczony skeuomorficznym prostokątem i wygląda inaczej niż czarny wskaźnik skierowany w prawo.
Będzie
2

Nie ma zakodowanego znaku do użycia jako symbol pauzy, chociaż różne znaki lub kombinacje znaków mogą wyglądać mniej więcej jak symbol pauzy, w zależności od czcionki.

W dyskusji publicznej listy Unicode w 2005 roku propozycja została wykonana użyć dwóch kopii znaku U + 275A HEAVY pionowy pasek: ❚❚. Ale adekwatność wyniku zależy od czcionki; na przykład glif mógł zostać zaprojektowany w taki sposób, że paski są zbyt daleko od siebie. - Dyskusja na liście wyjaśnia, dlaczego symbol pauzy nie został zakodowany i to się nie zmieniło.

Dlatego najlepszą opcją jest użycie obrazu. Jeśli potrzebujesz użyć symbolu w tekście, najlepiej jest utworzyć go w odpowiednio dużym rozmiarze (powiedzmy 60 na 60 pikseli) i przeskalować go do rozmiaru tekstu za pomocą CSS (np. Ustawienie height: 0.8emna imgelemencie).

Jukka K. Korpela
źródło
Możesz także dodać CSS, takie jak „letter-spacing: -6px” do podwójnego grubego pionowego paska, aby wyglądał bardziej jak prawdziwy symbol pauzy. Przykład: jsfiddle.net/enKaA
JaGo
To jest lepsze niż # 9616, ponieważ ma tę samą wysokość.
Aram Kocharyan,
2
Ta odpowiedź jest przestarzała. Unicode 7.0 (wydany w 2014 r.) Dodał U + 23F8 i pasujące symbole (odtwarzanie, zatrzymywanie, nagrywanie) właśnie w tym celu unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz
2

Symbol ISO 7000 / IEC 60417 dla pauzy; Przerwanie to # 5111B. Zobacz Media_Controls

intotecho
źródło