Utiliser du code pour ajouter de l'audio et de la vidéo à votre site Website Builder

En plus d’utiliser l’un de nos nombreux widgets, vous pouvez également ajouter de l’audio et de la vidéo à votre site dans le Website Builder avec HTML et le composant de code. Dans ce guide, nous vous expliquons comment.

Remarque : Le composant de code est une fonctionnalité de Website Builder Premium et Entreprises + Commerce électronique. Si vous utilisez actuellement Essentiel, vous pouvez mettre à niveau votre niveau ou utiliser le widget YouTube à la place. 


Étape 1 - Téléchargez le fichier audio ou vidéo sur votre espace Web

Tout d'abord, téléchargez votre fichier audio ou vidéo sur votre espace Web à l'aide de File Manager ou FTP. L'audio doit être au format mp3 et la vidéo au format mp4.

  1. Connectez-vous au panneau de configuration one.com.
  2. Ouvrez File Manager sous Paramètres d'hébergement dans le menu de gauche.
  3. Cliquez sur + Télécharger et sélectionnez le fichier audio (mp3) ou vidéo (mp4) que vous souhaitez intégrer à votre site.
  4. Copiez le chemin complet de votre fichier et collez-le dans un fichier texte pour une utilisation ultérieure.

Capture d'écran du File Manager. Les flèches rouges pointent vers le bouton Télécharger et le chemin complet.


Étape 2 - Ouvrez Website Builder

  1. Ouvrez Website Builder.
  2. Cliquez sur Widgets dans le menu des composants à gauche.
  3. Faites défiler la page vers le bas et sélectionnez Code.

Capture d’écran de l’éditeur Website Builder. Les flèches rouges pointent vers les widgets dans le menu et vers le composant Code.


Étape 3 - Intégrez le code dans Website Builder

  1. Copiez l'un des exemples de code ci-dessous, puis collez-le dans le composant de code de Website Builder.
  2. Remplacez CHEMIN COMPLET dans l'exemple de code par le chemin complet vers votre fichier audio ou vidéo.
  3. Cliquez sur Enregistrer.

Choisissez l’un des exemples ci-dessous, ou créez votre propre code avec la HTML <audio> tag et la HTML <video> tag. N’oubliez pas de remplacer FULL PATH par le chemin complet vers votre fichier audio ou vidéo.

Audio :

Intégrer un fichier audio mp3 :

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

Intégrez un fichier audio mp3 qui commence à être lu automatiquement :

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

Remarque : Certains navigateurs limitent la lecture automatique d'audio ou de vidéo, même si vous l'avez ajouté à votre code.

Vidéo :

Intégrer un fichier vidéo mp4 :

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

Intégrez un fichier vidéo mp4 qui commence à être lu automatiquement :

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

Conseil : La taille par défaut de la vidéo est de 640x480. Vous pouvez modifier la taille en ajustant les chiffres en fonction de la largeur et de la hauteur du code. Vous pouvez également rendre la vidéo sensible à l'écran du spectateur en changeant la largeur à « 100 % » (width="100 %") et la hauteur à « auto » (height="auto").

Capture d’écran montrant le code incorporé dans le File Manager et une flèche rouge pointant vers le bouton Enregistrer.


Étape 4 - Enregistrer et publier

  1. Le composant aura maintenant été ajouté à votre espace de travail. Faites glisser le composant à l'endroit où le fichier doit se trouver sur votre site.
  2. Cliquez sur Aperçu pour vérifier si cela se présente comme vous le souhaitez.
  3. Si tout est bon, cliquez sur Enregistrer et Publier pour que vos changements soient visibles en ligne.

Conseil : Ajoutez un composant boîte à votre site avec les mêmes dimensions que votre vidéo et attachez le composant de code à la boîte. Cela facilite le contrôle du placement de l'audio ou de la vidéo. La taille de la vidéo est déterminée par la hauteur et la largeur du code HTML.

Capture d'écran du site avec un composant vidéo.


Articles liés :

Cet article vous a-t-il été utile ?

Vous ne trouvez pas ce que vous cherchez ?

Commencez une conversation

Le moyen le plus rapide de nous contacter – en semaine de 09h00 à 16h00.