El otro día necesitaba poner un audio en mi blog pero no quería usar ni plugins ni insertar un video desde otra plataforma, como youtube, porque no hay necesidad de poner un link a otra web(youtube u otra) ni instalar un plugin para un video puntual.
Así se me ocurrió que mejor sería crear mi propio reproductor de audio para mi wordpress usando solamente HTML5. Ni que decir tiene que es sencillisimo crearlo.
Y si, hay muchas formas de insertar videos o audios en WordPress, en realidad no necesitas ni un reproductor ya que puedes editando una entrada o una página insertar un video desde “Media”.
Pero hacer un reproductor en HTML5 es muy sencillo y puedes personalizarlo mucho más.
En primer lugar necesitamos el audio o video, normalmente nuestro wordpress nos aceptará el formato .mp4
Hecho el audio le damos en nuestra entrada o página a la opción “text” en vez de usar la “visual” y pegamos el siguiente código:
<audio src=”COPIAR URL DEL AUDIO QUE HAYAS SUBIDO, LA URL LA PUEDES VER EN ‘MEDIA’ ” autoplay=”autoplay” controls=”controls”>
</audio>
Con la opción “autoplay” tal y cómo está puesta, el audio empezará a reproducirse cuando entres tú o cualquiera en la página donde esté insertado, lo que es muy útil para llamar la atención del visitante pero también puede ser molesto, si deseas quitarlo quitalo todo: autoplay=”autoplay”.
¿Quieres insertar un video?
Usa el mismo código pero cambia las palabras “audio” por “video” y ya está.
Además puedes decidir el tamaño del reproductor de video usando “height” y “width”.
EL código para video quedaría así:
<video src=”COPIAR URL DEL VIDEO QUE HAYAS SUBIDO, LA URL LA PUEDES VER EN ‘MEDIA’ ” height=”400″, with=”300″ autoplay=”autoplay” controls=”controls”>
</video>
A height y width le puedes poner un número cómo en el ejemplo, siendo el primero la altura y el segundo el ancho de video. Si pones números el navegador que lo reproduce(chrome, firefox, etc) entiende que son puntos, y si pones el simbolo “%”, entiende que es un porcentaje del “div” o la etiqueta que sea dónde esté dentro el reproductor.
Ejemplo propio: he creado este video para insertarlo aqui en mi propio reproductor HTML5:
El código que he usado es el siguiente:
<video src=”https://yourwpweb.com/wp-content/uploads/2017/07/Screencast_10-07-17_190038.webm ” controls=”controls” height=”20%” width=”60%”>
</video>
Obviamente tienes que cambiar tu propio URL: src=”URL”
|
|
Acepto donaciones de BAT's mediante el navegador Brave 🙂 |