Cómo añadir audio y vídeo a tu sitio web creado con el Website Builder mediante código

Además de utilizar uno de nuestros numerosos widgets, también puedes añadir archivos de audio y vídeo a tu sitio web en el Website Builder mediante HTML y el componente de código. En esta guía te explicamos cómo hacerlo.

• Paso 1 - Sube el archivo de audio o vídeo a tu espacio web
• Paso 2 - Abre el Website Builder
• Paso 3 - Incrusta el código en el Website Builder
• Paso 4 - Guardar y publicar

Nota: El componente de código es una función de Website Builder Premium y Business + Ecommerce. Si actualmente utilizas Starter, puedes actualizar tu plan o utilizar el YouTube widget en su lugar. 

Paso 1 - Sube el archivo de audio o vídeo a tu espacio web

En primer lugar, sube tu archivo de audio o vídeo a tu espacio web mediante el File Manager o FTP. Los archivos de audio deben estar en formato mp3 y los de vídeo en mp4.

1. Inicia sesión en el Panel de control de one.com.
2. Abre el File Manager en la secciónConfiguración del alojamiento del menú de la izquierda.
3. Haz clic en + Subir y selecciona el archivo de audio (mp3) o de vídeo (mp4) que quieras insertar en tu sitio web.
4. Copia la ruta completa del archivo y pégala en un archivo de texto para poder usarla más adelante.

Paso 2 - Abre el Website Builder

1. Abre el Website Builder.
2. Haz clic en Widgets en el menú de componentes de la izquierda.
3. Desplázate hacia abajo y selecciona Código.

Paso 3 - Incrusta el código en el Website Builder

1. Copia uno de los ejemplos de código que aparecen a continuación y pégalo en el componente de código de Website Builder.
2. Sustituye «FULL PATH» en el ejemplo de código por la ruta completa a tu archivo de audio o vídeo.
3. Haz clic en Guardar.

Elige uno de los ejemplos que aparecen a continuación o crea tu propio código utilizando las HTML <audio> tag y HTML <video> tag. Recuerda sustituir FULL PATH por la ruta completa de tu archivo de audio o vídeo.

Audio:

Incrustar un archivo de audio MP3:

<audio controls>
<source src="FULL PATH" type="audio/mpeg">
</audio>

Incrusta un archivo de audio MP3 que se reproduzca automáticamente:

<audio controls autoplay>
<source src="FULL PATH" type="audio/mpeg">
</audio>

Nota: Algunos navegadores limitan la reproducción automática de audio o vídeo, incluso aunque lo hayas añadido a tu código.

Video:

Incrustar un archivo de vídeo MP4:

<video width="640" height="480" controls>
<source src="FULL PATH" type="video/mp4">
</video>

Incrusta un archivo de vídeo MP4 que se reproduzca automáticamente:

<video width="640" height="480" controls autoplay>
<source src="FULL PATH" type="video/mp4">
</video>

Consejo: El tamaño predeterminado del vídeo es 640x480. Puedes cambiar el tamaño modificando los valores de anchura y altura en el código. También puedes hacer que el vídeo se adapte a la pantalla del usuario cambiando la anchura a «100 %» (width="100%") y la altura a «auto» (height="auto").

Paso 4 - Guardar y publicar

1. El componente ya se habrá añadido a tu espacio de trabajo. Arrastra el componente hasta la ubicación en la que debe aparecer el archivo en tu sitio web.
2. Haz clic en «Vista previa» para comprobar si el resultado es el que deseas.
3. Si todo está bien, haz clic en «Guardar y publicar» para que los cambios se vean reflejados en línea.

Consejo: Añade un box componente a tu sitio web con las mismas dimensiones que tu vídeo y vincula el componente de código a ese cuadro. Esto facilita el control de la ubicación del audio o el vídeo. El tamaño del vídeo viene determinado por la altura y la anchura que se indiquen en el código HTML.

Artículos relacionados:

• ¿Para qué sirven los contenedores?
• Uso del editor de vista móvil