@ 40-Love: ¿es una pregunta seria? es Microsoft !!
Ringo
Respuestas:
47
¡Si! La etiqueta de audio HTML5 con el atributo "controles" utiliza el reproductor predeterminado del navegador. Puede personalizarlo a su gusto sin usar los controles del navegador, sino moviendo sus propios controles y hablando con la API de audio a través de javascript.
Afortunadamente, otras personas ya lo han hecho. Mi reproductor favorito en este momento es jPlayer , es muy estilizable y funciona muy bien. Echale un vistazo.
¿Entonces la respuesta es "no, no es posible, debes usar un reproductor externo"?
Fernando
2
@Fernando: sí es posible. Esto responde a la pregunta "¿es posible?"
Dan Schnau
3
Gracias @dsschnau. Publiqué mi comentario porque la pregunta es sobre el estilo de la etiqueta de video html5 , y todas las respuestas son más o menos como sí, es posible, usando otras etiquetas .
Fernando
10
Entonces, ¿eso es realmente un "no"? Desarrollar su propia interfaz de usuario no es lo mismo que un marcado existente.
bob
2
Esta respuesta es realmente solo un enlace a un recurso. ¿Qué pasa si jPlayer desaparece ?
Sí: puede ocultar la interfaz de usuario del navegador incorporada (eliminando el controlsatributo de audio) y, en su lugar, crear su propia interfaz y controlar la reproducción usando Javascript ( fuente ):
te dará algunos resultados. Parece que no quiere que el reproductor tenga una altura superior o inferior a 25 px, pero el ancho se puede acortar o alargar hasta cierto punto.
esto fue lo suficientemente bueno para mí; vea este ejemplo (advertencia, el audio se reproduce automáticamente): www.thenewyorkerdeliinc.com
Para mí, un gran problema es Internet Explorer. Se ve terrible, con un color diferente y un tamaño mucho más grande que los otros jugadores del navegador, aunque el ancho está configurado en 150px
Ringo
Si necesita colocar el reproductor IE9 + en un espacio pequeño, me funcionó una altura de 25 px y un ancho de 100 px. Creo que la altura de 25px fue clave, pero los números más grandes no funcionaron por alguna razón.
Ringo
Desafortunadamente, el enlace no funciona
Alex Sorokoletov
6
Para cambiar solo el color del reproductor, simplemente dirija la etiqueta de audio en su archivo css, por ejemplo, en uno de mis sitios el reproductor se volvió invisible (blanco sobre blanco), así que agregué:
Respuestas:
¡Si! La etiqueta de audio HTML5 con el atributo "controles" utiliza el reproductor predeterminado del navegador. Puede personalizarlo a su gusto sin usar los controles del navegador, sino moviendo sus propios controles y hablando con la API de audio a través de javascript.
Afortunadamente, otras personas ya lo han hecho. Mi reproductor favorito en este momento es jPlayer , es muy estilizable y funciona muy bien. Echale un vistazo.
fuente
REFERENCIA: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F
fuente
Sí: puede ocultar la interfaz de usuario del navegador incorporada (eliminando el
controls
atributo deaudio
) y, en su lugar, crear su propia interfaz y controlar la reproducción usando Javascript ( fuente ):A continuación, puede diseñar los elementos como desee utilizando CSS.
Referencia de la API de MDN HTMLAudioElement
fuente
La apariencia de la etiqueta depende del navegador, pero puede ocultarla, crear su propia interfaz y controlar la reproducción usando Javascript.
fuente
algunas afinaciones de color
fuente
Tienes que crear tu propio reproductor que interactúe con el elemento de audio HTML5. Este tutorial ayudará a http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/
fuente
Ken también tenía razón.
una
css
etiqueta:te dará algunos resultados. Parece que no quiere que el reproductor tenga una altura superior o inferior a 25 px, pero el ancho se puede acortar o alargar hasta cierto punto.
esto fue lo suficientemente bueno para mí; vea este ejemplo (advertencia, el audio se reproduce automáticamente): www.thenewyorkerdeliinc.com
fuente
Para cambiar solo el color del reproductor, simplemente dirija la etiqueta de audio en su archivo css, por ejemplo, en uno de mis sitios el reproductor se volvió invisible (blanco sobre blanco), así que agregué:
Esto cambió el reproductor a azul claro.
fuente
Sí, es posible, de @ Fábio Zangirolami responder
fuente
Si desea diseñar el reproductor de música estándar de los navegadores en CSS:
fuente