html - stop - video dom events

HTML para el símbolo de pausa en el control de audio y video (10)

Estoy tratando de encontrar el símbolo Unicode para hacer que un botón muestre el símbolo de pausa Unicode. Pude encontrar que el símbolo de reproducción Unicode es &#9658 pero estoy buscando el equivalente del símbolo de pausa Unicode.

El símbolo ISO 7000 / IEC 60417 para pausa; La interrupción es # 5111B. Ver Media_Controls

Estoy usando ▐ ▌

HTML: ▐ ▌

CSS: /2590/A0/258C

Hay varios símbolos que podrían considerarse reemplazos adecuados, que incluyen:

| | - dos barras verticales estándar (en negrita).
▋▋ - ▋ y otro ▋
▌▌ - ▌ y otro ▌
▍▍ - ▍ y otro ▍
▎▎ - ▎ y otro ▎
❚❚ - ❚ y otro ❚

Puede que me haya perdido uno o dos, pero creo que estos son los mejores. Aquí hay una lista de símbolos por si acaso.

Lo encontré, está en el bloque técnico misceláneo. ⏸ (U + 23F8)

Lo siguiente puede ser útil:

⏩ ⏩
⏪ ⏪
⏫ ⓫
⏬ ⏬
⏭ ⏭
⏮ ⏮
⏯ ⏯
⏴ ⏴
⏵ ⏵
⏶ ⏶
⏷ ⏷
⏸ ⏸
⏹ ⏹
⏺ ⏺

NOTA : aparentemente, estos caracteres no son muy compatibles con las fuentes populares, por lo que si planea usarlo en la web, asegúrese de elegir una fuente web que los admita.

Los navegadores modernos admiten ''DOUBLE VERTICAL BAR'' (U + 23F8), también:

fileformat.info/info/unicode/char/23f8/index.htm

Para un reproductor de música, puede actuar como un acompañante para "NEGRO PUNTERO DE PUNTO LENTO" (U + 25BA) porque ambos comparten ancho y altura iguales, por lo que es perfecto para un botón reproducir / pausa:

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

No hay ningún carácter codificado para usar como símbolo de pausa, aunque varios caracteres o combinaciones de caracteres pueden parecer más o menos como un símbolo de pausa, dependiendo de la fuente.

En una discusión en la lista de correo pública Unicode en 2005, se suggestion usar dos copias del carácter U + 275A HEAVY VERTICAL BAR: ❚❚. Pero la adecuación del resultado depende de la fuente; por ejemplo, el glifo podría haber sido diseñado para que las barras estén demasiado separadas. - La discusión de la lista explica por qué un símbolo de pausa no se ha codificado, y esto no ha cambiado.

Por lo tanto, la mejor opción es usar una imagen. Si necesita usar el símbolo en el texto, lo mejor es crearlo en un tamaño adecuadamente grande (digamos 60 por 60 píxeles) y height: 0.8em al tamaño de texto con CSS (por ejemplo, height: 0.8em configuración height: 0.8em en el elemento img ) .

Para evitar jugar con caracteres no compatibles, puede usar una fuente de icono escalable como:

Fuente impresionante

Icons Google

o cualquier otro conjunto de fuentes que puedas encontrar en la naturaleza .

Iconos de jugador que usan caracteres UTF-8

demo jsBin con ejemplos extendidos

Después de una extensa investigación , elegí los mejores que satisfacían estos requisitos:

Se puede agrupar con al menos otros 2 símbolos de caracteres
Ajuste con gracia (centrado) en la altura de línea predefinida; (como si se coloca dentro del elemento <button> )
Requerir la menor cantidad de ajustes en CSS (como el espaciado entre letras para pausa, etc.)

_{NB : la familia de fuentes de puede no ser apropiada para esta vista previa, pruebe el código en su página o arregle los símbolos con los que mejor se ajusten.} _{Tenga en cuenta también que Firefox tiene un conjunto de glifos interno al que recurrir, mientras que Chrome muestra un cuadro vacío para los que faltan.} _{Asegúrese de obtener el mismo resultado en todos los dispositivos y navegadores .}

◼ ❙❙ ⚫ ⚫ ⚫

◼ ❙❙ ❚❚ ► ⚫ ⏪ ⏩

◾ ▮▮ ▶ ●

◾ ▮▮ ▶ ●

◽ ▯▯ ▷ ⚬ ∘

◽ ▯▯ ▷ ⚬ ∘

◻ | | ▷ ◯

◻ ❘ ❘ ▷ ◯

▪ ▸ • ▫ ▹ ◦

▪ ▸ • ▫ ▹ ◦

_{(Para reducir el espacio en el icono de algunas pausas use CSS: letter-spacing:-1px; )}

Extras:

‣ □ ■ □ □ ☐ ⟲ ⟳ ⥀
⏏ ☰ ☰ ⁌ ⚬ ⚬ ⚬

‣ ⌷⌷ ■ □ ∎ ⃞ ☐ ⟲ ⟳ ⥀ ⏏ ☰ ⁌ ⁍ ⧏ ⧐ ⑈ ∞ ⚫ ⚬

⋜ ◽. ⊲ ∘ ⋝
⌳ ⋈ ∿ ⊶ ⚭ ⚭
⊖⊕⊙
↻↺
≡ ⋮
≛≣
★★★★ ☆

⋜ ◽ ॥ ⊲ ∘ ⋝ //Prv, St, Pau, Ply, Rec, Nxt ⌳ ⋈ ∿ ⊶ ⎋ ⚭ //Fad, X-Fad, Fx, Eq, Pan, Stereo ⊖⊕⊙ //Vol-, Vol+, Mute ↻↺ //Repeat ≡⋮ //Menu, Options ≛≣ //Favorited, Add to Fav. (Tracks list) ★★★★☆ // Rating

Como puede ver, ninguna de las otras respuestas sugeridas se ajustaba a mis requisitos, y aquí hay un ejemplo de por qué:

<h2>Problematic</h2> <button>||</button> || Two pipes :( bye fellas... <button>▐▐</button> &#9616;#9616; Too tall and messed spacing! <button>▋▋</button> &#9611;#9611; Too large and messed spacing! <button>▐ ▌</button> &#9616;&#9616; Lovable but... Tall and cannot fit-size with any other player symbol <button>▌▌</button> &#9612;&#9612; Way too tall and messed spacing! <button>▗ ▖</button> &#9623;&#9622; Wrong alignment + extra spacing <button>⬤</button> &#11044; Height...

PD: Generador de caracteres UTF-8 Unicode de: https://.com/a/25986009

Si quieres que un solo personaje coincida con el triángulo orientado hacia la derecha para "jugar", prueba el número romano 2. Ⅱ es Ⅱ en HTML. Si puede colocar etiquetas de formato alrededor, se ve muy bien en negrita. Ⅱ es Ⅱ en HTML. Esto tiene un soporte mucho mejor que la barra vertical doble mencionada anteriormente.

▐▐ es HTML y está hecho con este código: ▐▐ .

Aquí hay un ejemplo de JSFiddle.