Intégrez un lecteur vidéo sur tout site

Pourquoi ne pas utiliser la balise vidéo brute ?

Une simple balise vidéo HTML avec un MP4 convient pour une boucle de dix secondes, puis elle atteint ses limites. Les gros fichiers saccadent sur les connexions lentes, les formats varient selon les navigateurs et votre propre hébergeur paie la bande passante à chaque lecture. Un lecteur intégré inverse la situation : le fichier est sur FileHost.net, le flux s'adapte à la connexion du spectateur et votre page ne contient qu'une petite iframe.

Ce que le lecteur inclut vraiment

La lecture repose sur un lecteur basé sur Video.js qui diffuse en HLS. Les spectateurs disposent du plein écran, d'un menu de vitesse de lecture, de raccourcis clavier pour lecture, navigation, volume, muet et plein écran, d'un mode cinéma qui assombrit la page et de miniatures au survol de la timeline, générées automatiquement après l'envoi. Les sous-titres s'ajoutent sous forme de fichiers SRT, parmi 45 langues, et le lecteur peut démarrer avec une piste de sous-titres déjà activée si vous le souhaitez.

Les propriétaires peuvent définir la largeur et la hauteur de l'intégration, ajouter leur propre logo, choisir une image d'aperçu ou poster et, en premium, adapter la couleur du lecteur à leur site. Les utilisateurs avancés peuvent connecter une balise de pub VAST ou des réglages de pop depuis le tableau de bord.

Intégrer une vidéo en cinq étapes

1. 1Envoyez la vidéo et attendez qu'elle soit indiquée comme prête dans votre liste de vidéos.
2. 2Ouvrez la vidéo et choisissez l'onglet d'intégration. Le code par défaut est une iframe de 600 par 480 pixels que vous pouvez redimensionner.
3. 3Copiez le code et collez-le dans la vue HTML de votre page, ou dans un bloc HTML personnalisé de votre éditeur.
4. 4Rendez-la adaptable en plaçant l'iframe dans un conteneur au format 16 par 9, que la plupart des thèmes fournissent déjà.
5. 5Ouvrez la page en navigation privée sur un téléphone et sur un ordinateur pour vérifier la lecture et les dimensions avant de publier.

Code d'intégration

Iframe de base

Voici la structure générée par le tableau de bord. Remplacez le code par l'ID public de votre propre vidéo.

<iframe width="600" height="480" src="https://filehost.net/e/YOUR_CODE" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>

Conteneur adaptable

Un petit conteneur conserve le format 16 par 9 quelle que soit la largeur d'écran. Ajoutez-le à votre feuille de style et utilisez la même iframe à l'intérieur.

<div style="position:relative;aspect-ratio:16/9;max-width:100%">
  <iframe src="https://filehost.net/e/YOUR_CODE"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    allowfullscreen="true"></iframe>
</div>

Performances et référencement

Une iframe est isolée de vos propres scripts : elle ne ralentit pas votre mise en page et n'entre pas en conflit avec votre thème, mais les moteurs de recherche considèrent la vidéo comme appartenant à l'adresse intégrée. Associez l'intégration à un titre descriptif, un court résumé écrit et une transcription sur votre propre page pour que le contenu reste bien référencé. Ajoutez l'attribut loading défini sur lazy à l'iframe quand la vidéo se trouve sous la ligne de flottaison.

Comme le gros du travail se fait ailleurs, votre facture d'hébergement reste stable lors des pics de trafic. C'est le principal avantage pratique pour les petits sites sur hébergement mutualisé.

Monétiser les vues intégrées

Les vues du lecteur intégré comptent dans vos gains au même tarif que la page de lecture : un article populaire peut donc s'autofinancer. Vous pouvez aussi diffuser vos propres pubs VAST dans le lecteur ; le trafic servi pendant que vos pubs sont actives est prélevé sur la bande passante premium, facturée au tarif fixe de 2 dollars par téraoctet. Lisez les règles de gains avant d'en faire un modèle économique.

Dépannage

Si le lecteur affiche une zone vide, vérifiez que votre page ne bloque pas les frames tierces avec une politique de sécurité de contenu. Si les sous-titres n'apparaissent pas, vérifiez que la piste a été ajoutée à la bonne vidéo et qu'elle est au format SRT. Si la page s'affiche mal sur mobile, remplacez la largeur et la hauteur fixes par le conteneur adaptable ci-dessus.

FileHost.net face à la concurrence

Intégrer depuis un service de type drive donne souvent un cadre d'aperçu peu pratique. Voyez en quoi les lecteurs diffèrent.

Toutes les comparaisons

Outils et guides associés