Base de connaissances
1 000 FAQ, 500 tutoriels et vidéos explicatives. Ici, il n'y a que des solutions !
Ce guide explique comment insérer une image, un logo, un filigrane, un watermark, sur vos diffusions de Streaming vidéo afin de renforcer votre image de marque et protéger votre contenu contre la copie ou d'éventuels détournements.
Préambule
Il existe deux manières d'incruster votre logo à vos diffusions :
- superposer un logo via le player (gratuit): le logo est superposé sur la vidéo et ne sera pas visible si le flux est intégré en dehors du player
- incruster le logo via un transcodage (option payante): le logo est incrusté dans la vidéo et sera visible dans tous les cas de figure ; ce cas nécessite le réencodage complet du ou des flux par un serveur de transcodage, ce qui explique le coût de cette méthode
Dans les deux cas de figure, il est possible de personnaliser les paramètres suivants:
- position du logo (dans l'un des quatre coins du player, espacement depuis le bord, etc.)
- taille du logo (p.ex un logo Ă 50% sera deux fois plus petit)
- nous vous recommandons d'utiliser la taille native pour optimiser le chargement et la qualité du rendu
- dans le cas du transcodage vidéo, la taille du logo est calculée par rapport à la vidéo source (ou qualité maximum) ; le logo sera redimensionné automatiquement si des qualités inférieurs sont présentes afin de conserver un ratio identique
- opacité du logo
1. Superposer un logo via le player (gratuit)
Pour cela:
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Edge
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir Streaming vidéo (univers Streaming)
- cliquer sur le flux concerné
- cliquer sur Intégration puis sur Players depuis le menu à gauche
- cliquer sur le player Ă personnaliser
- aller dans l'onglet Apparence
- ajouter le logo souhaité au format png, jpg ou gif (non animé)
2. Activer l'option watermark (option payante)
Pour cela
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Edge
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir Streaming vidéo (univers Streaming)
- cliquer sur le flux concerné
- cliquer sur Paramètres puis sur Options depuis le menu à gauche
- activer l'option Watermark
- ajouter le logo souhaité au format png, jpg ou gif (non animé)
Ce guide concerne Site Creator, outil Infomaniak pour la création de site proposant entre autre une bibliothèque pour vos médias (images, vidéos, documents, etc.).
Accéder aux fichiers
Pour accéder à Site Creator :
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Firefox
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir HĂ©bergement (univers Web & Domaine)
- cliquer directement sur le nom de l'objet concerné dans le tableau qui s'affiche
- cliquer sur Site Creator dans le menu latéral gauche
- cliquer sur Personnaliser mon site
La bibliothèque est accessible depuis la partie inférieure du menu latéral gauche, sous Fichiers:
Ces médias seront à votre disposition lorsque vous éditerez vos pages et souhaiterez insérer du contenu.
Organisez vos fichiers, dossiers et sous-dossiers
Attention vous ne pouvez pas:
- déplacer des fichiers/dossiers
- renommer des fichiers/dossiers
- supprimer un dossier si celui-ci n'est pas entièrement vide
Créer un nouveau dossier
Utiliser le menu d'action â‹® en bas Ă droite de la fenĂŞtre:
Charger un nouveau fichier dans la bibliothèque
Cliquer sur Envoyer un fichier pour parcourir votre disque dur et charger les fichiers désirés:
Les formats d'image habituels sont supportés (webp, jpg, jpeg, png, gif, svg, etc.), idem pour les vidéos (mp4, mov, etc.) et vous pouvez également charger des fichiers (zip, pdf, etc.) afin de p.ex les mettre à disposition des visiteurs par le module Téléchargement de fichier.
Compresser une image
L'option Compresser une image depuis la bibliothèque génère l'erreur de clé API TinyPNG:
Pour éviter cela, obtenir une clé API TinyPNG sur leur site et la renseigner sous Applications > TinyPNG de SiteCreator:
Ouvrir l'Ă©diteur d'image
Survoler une image de la bibliothèque et cliquer sur le menu d'action ⋮ pour accéder à l'éditeur d'image:
Rechercher et utiliser des images libres
Dans la barre latérale gauche de la bibliothèque se trouve un élément de menu conduisant à des images stock (banque d'images) libres de droit que vous pouvez insérer dans votre bibliothèque pour agrémenter votre site:
Protéger votre contenu
Cliquer sur Paramètres dans la barre latérale gauche puis sur Paramètres généraux.
En bas se trouve une option qui une fois activée interdit le clic droit des visiteurs sur votre site.
Résoudre un problème d'upload
Essayez de télécharger des JPG ou PNG les plus légers possible ; il n'est pas nécessaire de télécharger des images d'une largeur supérieure à 1000 pixels.
Assurez-vous que vos fichiers ne soient pas en résolution "300DPI" ou supérieure, vous n'en avez pas besoin sur votre site Web, c'est uniquement pour l'impression.
Si vous essayez de télécharger des fichiers directement depuis votre appareil photo, essayez de les redimensionner avant de les télécharger ; depuis votre iPhone, elle peut être au format HEIF/HEIC, qui n'est pas pris en charge - essayez de la convertir en JPG d'abord.
Ce guide vous permet de vous prémunir contre le hotlinking sur des Hébergement Web Infomaniak.
Préambule
Le hotlinking, également connu sous le nom de "leeching" ou "bandwidth theft", se produit lorsqu'un site Web intègre directement des ressources (telles que des images, des vidéos ou des fichiers audio) hébergées sur un autre site, sans autorisation de ce dernier. Cela signifie que le site distant est utilisé pour afficher le contenu sur le site hotlinking, ce qui peut entraîner une utilisation non autorisée des ressources et une consommation de bande passante chez le propriétaire du site distant.
EmpĂŞcher le hotlinking
Les propriétaires de contenu peuvent mettre en place des mesures pour prévenir le hotlinking, telles que des règles dans le fichier .htaccess à la racine du site Web pour bloquer les requêtes provenant de sites spécifiques ou pour rediriger vers une image de remplacement:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?infomaniak.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|svg)$ https://infomaniak.com/imagederemplacement.png [NC,R,L]
Remplacer "infomaniak.com" ci-dessus par l'adresse de votre site.
Retirer les 3 lignes google/bing/yahoo si vous ne souhaitez pas que ces 3 sites soient autorisés à afficher vos images.
Ce guide vous permet de rapidement utiliser les fonctions essentielles du Streaming vidéo Infomaniak.
Par oĂą commencer ?
1. Configuration du flux
La transmission d'un flux aux serveurs d'Infomaniak peut se faire de deux façon différentes :
- via un encodeur vidéo (ou une caméra faisant office d'encodeur) qui poussera le flux vers les serveurs Infomaniak ; pour offrir plusieurs qualités de flux et améliorer l'expérience de vos utilisateurs, vous avez la possibilité d'activer le multi-bitrate
- via une caméra IP, ou une source externe à partir de la laquelle les serveurs Infomaniak iront tirer le flux
2. Créer un player pour proposer le flux à vos internautes
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Edge
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir Streaming vidéo (univers Streaming)
- cliquer sur le nom de l'objet concerné dans le tableau qui s'affiche
- cliquer sur Intégration dans le menu latéral gauche
- cliquer sur Players dans le menu latéral gauche
- cliquer sur le bouton bleu pour ajouter un lecteur
3. Enregistrer vos directs de manière planifiée ou automatique
Consulter ce guide pour savoir comment archiver ou enregistrer vos diffusions.
Pour aller plus loin...
- Incruster un watermark / logo sur un flux vidéo en direct
- Personnaliser les images en cas de restriction du flux sur votre player
- Pourquoi y a-t-il un délais de diffusion entre ma source et la disponibilité d'un flux ?
- Quelles sont les caméras compatibles avec la plateforme d'Infomaniak ?
- Comment protéger l'accès à mon flux avec un hash unique (token) ?
En cas de besoin, contacter le support Infomaniak.
Ce guide présente plusieurs exemples d'utilisation de Varnish sur Serveur Cloud Infomaniak.
⚠️ Pour de l'aide supplémentaire contacter un partenaire ou remplir un appel d'offres — lire aussi le rôle de l'hébergeur
Configuration de Varnish
Voici à quoi pourrait ressembler un fichier de configuration de base avec quelques cas courants et différentes actions/règles dans un seul exemple:
vcl 4.0;
# This should not be modified
backend default {
.host = "127.0.0.80";
.port = "80";
}
# An ACL is an "Access control list", which defines a list of IPs, later to be reused in a rule, for example "Who can purge the cache"
acl purge {
"localhost";
"1.2.3.4"; # My Home IP
"42.42.42.0"/24; # My company's public IP range
! "42.42.42.7"; # Except some annoying colleague
}
# Happens when varnish first gets the request, before sending it to the backend
sub vcl_recv {
# Allow purging
if (req.method == "PURGE") {
# Not from an allowed IP? Then die with an error.
if (!client.ip ~ purge) { # purge is the ACL defined at the begining
# 'synth' is a function that returns a page (without asking the backend) that will not get cached.
return (synth(405, "This IP is not allowed to send PURGE requests."));
}
# If you got to this stage (and didn't error out above), purge the cached result
return (purge);
}
# Allow purging all images, for example
if (req.method == "PURGEALL" && req.url == "/images") {
if (!client.ip ~ purge) {
return (synth(405, "This IP is not allowed to send PURGE requests."));
}
# The 'ban' function is a built-in that allows to invalidates all objects in cache that match the given expression
ban("req.url ~ \.(jpg|png|gif|svg)$");
return (synth(200, "Purged images."));
}
# Pages with authorization are not cached
if (req.http.Authorization) {
# With the 'pass' action, the request will be directly passed from the backend without entering the cache
return (pass);
}
}
# Happens after we have read the response headers from the backend.
# Here you clean the response headers, define if the request must get cached, for how much time, etc.
sub vcl_backend_response {
# Cache all images for 1 day by default
if (beresp.http.content-type ~ "image") {
set beresp.ttl = 1d;
}
# If server set a "uncacheable" header, do not store the response in cache
if (beresp.http.uncacheable) {
set beresp.uncacheable = true;
}
}
Purge Ă partir de l'interface CLI
À partir de là , les règles énoncées dans la configuration ci-dessus fonctionnent sur toutes les demandes, donc si le site configuré est "domain.xyz", vous pouvez simplement utiliser l'outil CLI "curl" et faire ce qui suit:
$ curl -X PURGE https://domain.xyz/
<!DOCTYPE html>
<html>
<head>
<title>200 Purged</title>
</head>
<body>
<h1>Error 200 Purged</h1>
<p>Purged</p>
<h3>Guru Meditation:</h3>
<p>XID: 2</p>
<hr>
<p>Varnish cache server</p>
</body>
</html>
Et là , la page d'accueil a été purgée. Ou pour purger une autre URL, il suffit de faire pointer la requête vers cette dernière:
$ curl -X PURGE https://domain.xyz/some_path/some_file.html
<!DOCTYPE html>
<html>
<head>
<title>200 Purged</title>
</head>
<body>
<h1>Error 200 Purged</h1>
<p>Purged</p>
<h3>Guru Meditation:</h3>
<p>XID: 4</p>
<hr>
<p>Varnish cache server</p>
</body>
</html>
Ou, comme indiqué dans la configuration VCL, purger toutes les images:
$ curl -X PURGEALL https://domain.xyz/images
<!DOCTYPE html>
<html>
<head>
<title>200 Purged images.</title>
</head>
<body>
<h1>Error 200 Purged images.</h1>
<p>Purged images.</p>
<h3>Guru Meditation:</h3>
<p>XID: 32770</p>
<hr>
<p>Varnish cache server</p>
</body>
</html>
Purge Ă partir d'un CMS
C'est un peu plus difficile d'illustrer ce cas car il existe de nombreuses façons de gérer la mise en cache depuis un backend. Dans l'exemple de configuration ci-dessus, un contrôle sur l'en-tête "Uncacheable" est ajouté, qui désactive la mise en cache. Avec cette option, n'importe quel CMS pourrait simplement définir cet en-tête sur la réponse pour désactiver la mise en cache de cette requête p.ex.
A partir de n'importe quel code PHP et avec la configuration ci-dessus, vous pouvez simplement envoyer une requĂŞte HTTP et utiliser cet extrait pour effectuer un PURGE du cache:
<?php
if ($curl = curl_init("http://127.0.0.1/some_url")) {
curl_setopt_array($curl, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_CUSTOMREQUEST => "PURGE",
CURLOPT_HTTPHEADER => [
"Host: {$_SERVER['HTTP_HOST']}"
]
]);
curl_exec($curl);
if (curl_getinfo($curl, CURLINFO_HTTP_CODE) == 200) {
echo "Cache purged!";
}
curl_close($curl);
}
En savoir plus
Liens utiles concernant le langage de configuration Varnish (VCL) pour contrĂ´ler le traitement des demandes, le routage, la mise en cache et plusieurs autres aspects:
Ce guide détaille l'utilisation de smileys et autre émojis pour réagir et interagir aux discussions kChat.
Ajouter une réaction à un message
Pour réagir à n'importe quel moment à n'importe quel message auquel vous avez accès dans kChat, il suffit de survoler le message et de sélectionner soit l’émoticône parmi la sélection, soit sur le smiley avec le petit +:
S'il y a déjà des réactions, vous pouvez en ajouter une au même endroit:
Vous ouvrirez ainsi le panneau avec des centaines d’émoticônes à disposition (et même des émojis personnalisés - lire plus bas).
S'exprimer avec une Ă©moticĂ´ne ou un GIF
Ajouter un émoji au sein du message que vous rédigez est très simple. Il suffit de cliquer sur l'icône de visage souriant dans la barre de formatage de votre message:
Vous pouvez dès lors choisir un émoji:
ou insérer des courts GIF animés plutôt qu'une émoticône grâce à l'onglet situé en haut de l'encart qui s'affiche quand vous cliquez sur le visage souriant::
Si vous connaissez le nom du symbole à insérer, vous pouvez également taper : (2 points) suivi des 2 premiers caractères au minimum:
Astuce: si vous ajoutez #, ## ou ### comme premier caractère d'une nouvelle ligne contenant une émoticône, vous pourrez utiliser une émoticône plus grande. Pour essayer, envoyez un message tel que '# :smile:' (attention vos réglages personnalisés peuvent "désactiver" cette fonctionnalité d'affichage sur votre interface).
Pour définir la teinte par défaut, cliquer sur ce symbole du panneau des émojis:
Émoticônes personnalisées
Pour gérer des émoticônes supplémentaires, cliquer sur ce bouton du panneau des émojis:Spécifier un nom jusqu'à 64 caractères. Il peut contenir des lettres minuscules, des chiffres et les caractères « - », « + » et « _ ».
Spécifier un fichier .gif, .png ou .jpg pour votre émoticône. Le fichier peut peser jusqu'à 1 Mo. La taille est automatiquement redimensionnée à 128 sur 128 pixels, tout en maintenant le ratio de l'aspect.
L'émoticône pourra ensuite être utilisée par l'ensemble des utilisateurs kChat de votre organisation grâce au nom que vous lui avez attribué.
Ce guide concerne ImageMagick, une solution puissante pour la manipulation d'images, que vous pouvez installer sur un HĂ©bergement Web Infomaniak.
Pour l'installation, le plus simple est de passer par Fast installer.
ImageMagick et alternatives
Ces solutions de manipulation d'image sont compatibles avec les hébergements Web et Serveurs Cloud:
- ImageMagick : la principale suite logicielle pour la manipulation polyvalente d'images via la ligne de commande
- PerlMagick : interface Perl pour intégrer les fonctionnalités d'ImageMagick dans des scripts Perl
- Module Perl Image::Magick : extension Perl pour accéder aux fonctionnalités d'ImageMagick sans spécifier le chemin absolu de l'exécutable
- GD 2.x : bibliothèque graphique open-source offrant des fonctionnalités similaires à ImageMagick, souvent utilisée dans des contextes de développement web
- Gallery 2 : plateforme de gestion de galeries d'images compatible avec ImageMagick pour la présentation en ligne
et pour le module Perl Image::Magick:
ou sans préciser le chemin absolu:
Toutes les commandes imagemagick sont sous /usr/bin/
:
Ce guide explique comment modifier la vignette ou miniature représentant une vidéo sur un service VOD.
Modifier la miniature vidéo
Afin d'accéder à un média de l'espace VOD :
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Edge
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir VOD/AOD (univers Streaming)
- cliquer sur le nom de l'objet concerné dans le tableau qui s'affiche
- cliquer sur Médias dans le menu latéral gauche
- cliquer sur Gestion des médias dans le menu latéral gauche
- cliquer sur le média concerné dans le tableau qui s'affiche
- cliquer sur le bouton Modifier
2 possibilités permettent de remplacer l'image par défaut de la vidéo:
- sélectionner une image au sein de la vidéo elle-même (cliquer pour faire défiler la vidéo et appuyer sur un bouton pour extraire l'image vers la vignette de prévisualisation)
- charger une image depuis votre disque dur (2 Mo max.)
Valider en cliquant sur le bouton bleu Enregistrer.
Ce guide explique comment joindre des pièces jointes aux e-mails envoyés depuis Mail Infomaniak, la solution en ligne complète pour lire et gérer vos e-mails.
Joindre des fichiers de l'ordinateur au message
Pour ajouter une pièce jointe présente sur votre ordinateur:
- se connecter Ă Mail Infomaniak (mail.infomaniak.com) depuis un navigateur Web comme Brave ou Firefox
- cliquer sur Nouveau message
- cliquer sur l'icĂ´ne trombone Joindre un fichier
- parcourir les emplacements pour sélectionner les pièces à joindre au message
Si la taille des pièces jointes dépasse 25 Mo, un lien Swiss Transfer sera généré: les données sont stockées en Suisse dans le Cloud d’Infomaniak et automatiquement convertis en un lien de téléchargement. Vos destinataires pourront utiliser ce lien pour facilement télécharger vos pièces jointes durant une période prédéfinie.
Vous avez la possibilité d'envoyer jusqu'à 100 fichiers ou 3 Go maximum par message en utilisant cette méthode.
Joindre des fichiers kDrive au message
Pour ajouter une pièce jointe existante sur kDrive:
- se connecter Ă Mail Infomaniak (mail.infomaniak.com) depuis un navigateur Web comme Brave ou Firefox
- cliquer sur Nouveau message
- cliquer sur l'icône pour parcourir les emplacements et sélectionner les pièces à joindre au message
- cliquer sur le bouton bleu Pièce jointe (pour attacher les fichiers au message plutôt que d'envoyer un simple lien vers les fichiers) puis cliquer sur le bouton bleu Insérer
Inclure une image dans le corps du message
Pour ajouter une image au message (au milieu du texte de votre message), 2 possibilités:
- glisser/déposer l'image dans l'interface de saisie (les images de plus de 10 Mo ne seront pas affichées mais mises en pièce jointe)
- cliquer sur l'icône représentant le cadre avec les montagnes puis:
- cliquer sur le bouton pour téléverser une image (ce qui permet de la choisir à l'emplacement de votre choix puis de l'insérer dans le corps du message)
- ou inscrire l'adresse URL de l'image que vous souhaitez inclure ; l'image doit se trouver quelque part sur Internet (vous pouvez utiliser le gestionnaire de fichiers FTP Manager pour envoyer votre image sur votre espace d'hébergement si vous en possédez) et doit encore s'y trouver au moment de la consultation du message par votre correspondant
Ce guide explique comment insérer une image, un logo, un filigrane, un watermark, sur les vidéos de votre service VOD afin de renforcer votre image de marque et protéger votre contenu contre la copie ou d'éventuels détournements.
Ajouter l'image sur le média
Vous avez la possibilité d'ajouter une image qui apparaitra sur votre vidéo:
- soit depuis les règles propres à un dossier d'importation
- soit depuis la configuration d'un player (lecteur) vidéo
1. Dossier d'importation
Dans la section de gestion d'un dossier d'importation, l'incrustation de l'image sélectionnée est effectivement ce que son nom suggère : une intégration directe dans la vidéo. Cette méthode est moins flexible car une fois que le logo est intégré, aucune modification ultérieure n'est possible. Il est donc important de prendre en considération que tout changement de logo dans le futur pourrait poser problème, rendant cette approche moins adaptable sur le long terme.
2. Player vidéo
Dans la section de gestion d'un Player, le logo sélectionné est superposé à la vidéo, apparaissant uniquement au moment de la lecture. Cette approche offre la flexibilité de modifier le logo à tout moment, permettant ainsi l'utilisation de plusieurs lecteurs pointant vers la même vidéo sans aucune difficulté. Cependant, un inconvénient à considérer est que si un visiteur parvient à récupérer l'adresse réelle de la vidéo, celle-ci sera diffusée sans le logo. Malgré cet inconvénient, cette méthode est recommandée pour sa facilité d'utilisation et sa capacité d'adaptation.
Ces deux technologies sont différentes et ne travaillent pas au même moment donc si vous les activez simultanément vous obtiendrez le logo du player au dessus du logo incrusté.