HTML pour le symbole Pause dans le contrôle audio et vidéo

97

J'essaie de trouver le symbole Unicode pour qu'un bouton affiche le symbole de pause Unicode. J'ai pu constater que le symbole de lecture Unicode est &#9658mais je recherche l'équivalent du symbole de pause Unicode.

html unicode special-characters symbols user3081307
la source
1
Eu cette même question, mais pour un bouton "Stop" (carré). La réponse de Roko était la meilleure pour cela.
starmandeluxe

Réponses:

105

Il existe divers symboles qui pourraient être considérés comme des remplacements adéquats, notamment:

  1. | | - deux barres verticales standard (en gras).

  2. ▋▋ - ▋et un autre▋

  3. ▌▌ - ▌et un autre▌

  4. ▍▍ - ▍et un autre▍

  5. ▎▎ - ▎et un autre▎

  6. ❚❚ - ❚et un autre❚

J'en ai peut-être manqué un ou deux, mais je pense que ce sont les meilleurs. Voici une liste de symboles au cas où.

dsgriffin
la source
J'ai utilisé ceci: 𝍪.
JoshuaD
& # 9646; est le véritable symbole de pause en HTML.
Fla
@JoshuaD si vous souhaitez prendre en charge plusieurs navigateurs, vous ne devriez probablement pas utiliser celui-là. J'utilise la dernière version de Firefox et elle n'est pas lisible.
Un enfant de Dieu
3
J'ai utilisé =avec transform:rotate(90deg);.
Joe DF du
1
@AChildofGod - il ne s'agit pas (seulement) du navigateur, cela dépend des polices installées sur votre machine.
kubi
173

Norme Unicode pour les symboles de contrôle multimédia

Pause: ⏸︎

La norme Unicode 13.0 (mise à jour 2020) fournit les glyphes techniques divers dans la plage HEX 2300–23FF

Divers technique

Compte tenu de la vaste documentation Unicode 13.0 , certains des glyphes que nous pouvons associer aux symboles de contrôle multimédia courants seraient les suivants:

Symboles du clavier et de l'interface utilisateur

23CF ⏏︎ Éjecter le support

Symboles de l'interface utilisateur

23E9 ⏩︎ avance rapide
23EA ⏪︎ retour rapide, retour rapide
23EB ⏫︎ augmentation rapide
23EC ⏬︎ diminution rapide
23ED ⏭︎ sauter à la fin,
23EE suivant ⏮︎ sauter au début, précédent
23EF ⏯︎ bascule lecture / pause
23F1 ⏱︎ chronomètre
23F2 ⏲︎ horloge
23F3 ⏳︎ sablier
23F4 ⏴ ︎ arrière, arrière
23F5 ⏵︎ avant, suivant, lecture
23F6 ⏶︎ augmenter
23F7 ⏷︎ diminuer
23F8 ⏸︎ pause
23F9 ⏹︎ arrêter
23FA ⏺︎ enregistrer

Symboles de puissance de l'ISO 7000: 2012

23FB ⏻︎ veille / alimentation
23FC ⏼︎ mise sous / hors tension
23FD ⏽︎ mise sous tension
2B58 ⭘︎ mise hors tension

Symbole d'alimentation de IEEE 1621-2004

23FE ⏾︎ veille électrique

Utilisation sur le Web:

Un fichier doit être enregistré à l'aide du codage UTF-8 sans BOM (qui dans la plupart des environnements de développement est défini par défaut) afin d'indiquer à l'analyseur comment transformer correctement les octets en caractères. <meta charset="utf-8"/>doit être utilisé immédiatement après <head>dans un fichier HTML et assurez-vous que les en-têtes HTTP corrects Content-Type: text/html; charset=utf-8sont définis.

Exemples:

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"

Variante standardisée

Pour éviter un glyphe d'être « couleur emojified » ⏩︎ / ⏩ append le code U + FE0E texte Présentation Selector pour demander une variante normalisée : (exemple: &#x23e9;&#xfe0e;)

Incohérences

Les caractères de la gamme Unicode sont sensibles à l'environnement de famille de polices dans lequel ils sont utilisés, à l'application, au navigateur, au système d'exploitation, à la plate-forme.
Lorsqu'ils sont inconnus ou manquants , nous pourrions voir des symboles comme ou ▯ à la place, ou même un comportement incohérent en raison des différences dans les implémentations de l'analyseur HTML par différents fournisseurs.
Par exemple, sur les navigateurs Windows Chromium, le suffixe de variante standard U + FE0E est bogué, et ces symboles sont toujours mieux accompagnés de CSS, c'est- font-family: "Segoe UI Symbol"à- dire: pour forcer cette police spécifique sur l'Emoji coloré (généralement reconnu comme "Segoe UI Emoji") - ce qui défie le but de U + FE0E en premier lieu - le temps nous le dira…

Polices d'icônes évolutives

Pour contourner les problèmes liés aux caractères non pris en charge , une solution viable consiste à utiliser des jeux de polices d'icônes évolutives comme par exemple:

Police géniale

Icônes de joueur - évolutives - font génial

<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>
Développer l'extrait

Icônes Google

entrez la description de l'image ici

<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>
Développer l'extrait

et bien d'autres que vous pouvez trouver dans la nature; et last but not least, cet outil en ligne très utile: générateur d'icônes de polices, Icomoon.io .

Roko C. Buljan
la source
2
Merci mon pote, réponse vraiment utile.
Daniel Barde
1
Malheureusement, il n'y a pas de bouton "Arrêt encerclé" dans la police / les icônes Google, de sorte que leur ensemble "lecture encerclé" et "pause encerclée" est incomplet ...
Fizz
1
@Fizz github.com/google/material-design-icons/issues/851
Roko C. Buljan le
Réponse géniale - J'adore l'effort qui y a été consacré. Avez-vous remarqué le "Symbole ISO 7000 / CEI 60417 pour la pause; l'interruption est # 5111B. Voir Media_Controls", qui a été souligné par @intotecho dans cette réponse sous-estimée? → stackoverflow.com/a/48918561/4575793
Cadoiz
57

Les éléments suivants peuvent être utiles:

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

REMARQUE : apparemment, ces caractères ne sont pas très bien pris en charge dans les polices populaires, donc si vous prévoyez de les utiliser sur le Web, assurez-vous de choisir une police Web qui les prend en charge.

rr-
la source
22

Je l'ai trouvé, c'est dans le bloc Technique Divers. ⏸ (U + 23F8)

birtannic124
la source
3
Je ne sais pas comment la bonne réponse a été rejetée. Voir le lien ci-dessous où cette "double barre verticale" est également notée comme "pause" dans ses commentaires. Dommage qu'il ne semble pas être bien supporté dans les polices (ajoutées à Unicode en juin 2014). fileformat.info/info/unicode/char/23f8/index.htm
Anm
12

J'utilise ▐ ▌

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

CSS: \2590\A0\258C

Nathan va
la source
5

Si vous voulez qu'un seul caractère corresponde au triangle orienté vers la droite pour «jouer», essayez le chiffre romain 2. Ⅱ est &#8545;en HTML. Si vous pouvez mettre des balises de mise en forme autour, cela semble vraiment bien en gras. Ⅱ est <b>&#8545;</b>en HTML. Cela a un bien meilleur support que la double barre verticale mentionnée précédemment.

StarCrashr
la source
Je suis content que vous ayez mentionné le fait de le rendre audacieux. J'utilise & # 2405; et il est meilleur en gras.
efreed
5

Les navigateurs modernes prennent également en charge la 'DOUBLE BARRE VERTICALE' (U + 23F8):

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

Pour un lecteur de musique, il peut servir de compagnon pour `` POINTEUR NOIR POINTANT A DROITE '' (U + 25BA) car ils partagent tous les deux la même largeur et la même hauteur, ce qui le rend parfait pour un bouton lecture / pause:

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

Midzer
la source
1
Sur Mac, la double barre verticale est entourée d'une boîte skeuomorphe qui est différente du pointeur noir pointant vers la droite.
Sera
2

Il n'y a pas de caractère codé pour être utilisé comme symbole de pause, bien que divers caractères ou combinaisons de caractères puissent ressembler plus ou moins à un symbole de pause, selon la police.

Lors d'une discussion dans la liste de diffusion publique Unicode en 2005, il a été suggéré d'utiliser deux copies du caractère U + 275A HEAVY VERTICAL BAR: ❚❚. Mais l'adéquation du résultat dépend de la police; par exemple, le glyphe peut avoir été conçu de manière à ce que les barres soient trop espacées. - La discussion de la liste explique pourquoi un symbole de pause n'a pas été codé, et cela n'a pas changé.

Ainsi, la meilleure option est d'utiliser une image. Si vous devez utiliser le symbole dans du texte, il est préférable de le créer dans une taille suffisamment grande (par exemple 60 par 60 pixels) et de le réduire à la taille du texte avec CSS (par exemple, en définissant height: 0.8eml' imgélément).

Jukka K. Korpela
la source
Vous pouvez également ajouter du CSS comme "letter-spacing: -6px" à la double barre verticale lourde, donc cela ressemble plus à un vrai symbole de pause. Exemple: jsfiddle.net/enKaA
JaGo
C'est mieux que # 9616 car c'est la même hauteur.
Aram Kocharyan
2
Cette réponse est obsolète. Unicode 7.0 (sorti en 2014) a ajouté U + 23F8 et les symboles correspondants (lecture, arrêt, enregistrement) précisément à cet effet unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Fizz le
2

Le symbole ISO 7000 / CEI 60417 pour la pause; L'interruption est # 5111B. Voir Media_Controls

intotecho
la source