VIDEOS MANAGER v1.1. Documentation utilisateur Français. Videos Manager v of 21 [ contact@dryss.com

Transcription

1 VIDEOS MANAGER v1.1 Documentation utilisateur Français Videos Manager v of 21

2 TABLE DES MATIERES TABLE DES MATIERES... 2 PRESENTATION... 4 Licence... 4 A propos... 4 Support... 4 INSTALLATION DU MODULE... 5 Prérequis... 5 Installation... 6 Mise à jour... 6 ENCODAGE DES VIDEOS... 7 Utilitaire HandBrake... 7 FONCTIONNALITES BACK OFFICE (BO)... 8 FONCTIONNALITES FRONT OFFICE (FO)... 9 Fiche produit... 9 Page vidéos... 9 Bloc vidéos... 9 Short codes CMS... 9 BO : GESTION VIDEO BO : GESTION LECTEURS MEDIA Fonctionnalités des lecteurs Format vidéos Licence jwplayer License FlowPlayer BO : GESTION SOURCES MEDIA Fonctionnalités des sources Quelle source média choisir? Localhost YouTube Dailymotion Vimeo API DailyMotion Cloud API Amazon Web Service API Vimeo Plus Videos Manager v of 21

3 API Bits on the Run API Infomaniak BO : SHORT CODES CMS Installation Amazon Web Services Bits on the Run Dailymotion Dailymotion Cloud Infomaniak Localhost Vimeo Vimeo Plus YouTube BO : AJOUTER DES TRADUCTIONS FO : FICHE PRODUIT Produit vidéo FO : BLOC COLONNE Colonne droite ou gauche FO : PAGE VIDEOS FO : PERSONNALISER L AFFICHAGE Videos Manager v of 21

4 PRESENTATION Nom : Videos Manager Version : 1.1 PrestaShop : 1.5 & 1.6 Auteur : Site : DrÿSs Agency contact@dryss.com Licence Le code source de ce module est sous licence commerciale. Chaque licence est unique et ne peut être installée et utilisée que sur une seule boutique. Toute reproduction ou représentation totale ou partielle de Videos Manager, d un ou plusieurs de ses composants, par quelque procédé que ce soit, sans autorisation expresse de notre part, est interdite. Si vous n avez pas reçu ce module de notre part, merci de nous contacter. N éditez/n ajoutez pas de fichiers ou de code à ce module si vous voulez pouvoir le mettre à jour dans le futur. A propos Videos Manager permet d agrémenter vos fiches produit de vidéos en streaming afin d améliorer leur présentation et communiquer efficacement avec vos clients! Vous pouvez ajouter à chaque fiche produit existante un ou plusieurs fichiers vidéo (pseudo streaming depuis votre serveur web local, ou en utilisant l une des API disponible telle que YouTube, Dailymotion, Vimeo, etc). Lorsque l utilisateur consulte la fiche produit, il a alors la possibilité de visionner ces vidéos en streaming. Vous pouvez aussi afficher les dernières vidéos ajoutées (ou une sélection aléatoire) dans un bloc vidéos de la colonne droite ou gauche, et lister l ensemble des vidéos ajoutées sur une page dédiée. Support En cas de disfonctionnement, merci de nous contacter, nous fournissons des corrections du module gratuites. Nous proposons régulièrement des mises à jour du module, avec de nouvelles fonctionnalités intéressantes et des corrections de bugs. Restez au courant! Videos Manager v of 21

5 INSTALLATION DU MODULE Prérequis Vous devez au préalable avoir installé une version fonctionnelle de PrestaShop version 1.5.x sur votre serveur : Tableau des prérequis pour chaque source média : Version PHP Extension curl Extension OpenSSL Extension SOAP Localhost 5.2 YouTube Dailymotion Vimeo Amazon Web Service 5.2 Requis Requis DailyMotion Cloud 5.2 Requis Vimeo Plus 5.2 Requis Bits on the Run 5.2 Requis Infomaniak 5.2 Requis Videos Manager v of 21

6 Installation Le module s installe en toute transparence sur votre boutique, aucun fichier du cœur n est altéré ou modifié, permettant la continuité future des mises à jour de la boutique. 1) Décompressez l archive contenant le module dans un répertoire temporaire 2) Transférez l intégralité du contenu du dossier dans «Répertoire de votre boutique/module/» 3) Ouvrez le back office de votre boutique, cliquez sur l onglet «Modules», sélectionnez la catégorie «Fonctionnalités front office», et cliquez sur le bouton «Installer» à droite de Videos Manager : Mise à jour Nous fournissons régulièrement des mises à jour du module avec de nouvelles fonctionnalités et des corrections de bugs. Voici le processus de mise à jour du module Videos Manager: 1. Sauvegardez les videos et sous titres que vous stockez en sur votre serveur web. Dossier modules/ videosmanager /medias/videos/ Dossier modules/ videosmanager /medias/subtitles/ 2. Ouvrez le back office de votre boutique, cliquez sur l onglet «Modules», sélectionnez la catégorie «Autres modules», et cliquez sur le bouton «Désinstaller» à droite de Videos Manager. 3. Supprimez le dossier du module et tous les fichiers qu il contient. Dossier modules/ videosmanager / 4. Uploadez les fichiers contenus dans la nouvelle archive du module, puis procédez à l installation de celuici (voir page précédente). Videos Manager v of 21

7 ENCODAGE DES VIDEOS En fonction de la source média sélectionnée, il vous faut assurer la meilleure compatibilité possible pour la lecture vidéo sur les navigateurs utilisés par vos clients. Un article complet sur les formats, dimensions et bitrates recommandés est disponible sur le site LongTailVideo : player/28838/mp4 video encoding/ Utilitaire HandBrake Nous vous conseillons d utiliser l utilitaire gratuit HandBrake (compatible Linux/Mac/Windows). Celui ci permet de gérer finement l encodage de vos vidéos : Choisissez le codec MP4/H.264, optimisé pour le web : Videos Manager v of 21

8 FONCTIONNALITES BACK OFFICE (BO) Ajout d un onglet Videos Manager dans le menu du back office avec : Vidéos o o o Listing des vidéos avec classement/filtre Ajout/modification/suppression de vidéos (source, sous titres, couverture, preview, etc.) Hook (point d accroche) sur chaque fiche produit en back office Liste des vidéos liées au produit Explorateurs fichiers (prochainement!) o Explorateur de fichiers complet o Ajout/modification/suppression des fichiers vidéos o Récupération des données API des différentes sources Lecteurs média o Listing des lecteurs médias avec classement/filtre jwplayer 5 et jwplayer 6 FlowPlayer o Modification des options de chaque lecteur (filigrane, lecture automatique, etc) Sources média o Listing des sources médias avec classement/filtre Localhost pseudo streaming accès sécurisé via token temporaire API de cloud externes : Youtube Dailymotion Vimeo Amazon Web Service (S3/CloudFront) DailyMotion Cloud Vimeo Plus Bits on the Run Infomaniak o Modification des options de chaque source (identifiants API, paramètres, etc) Paramètres généraux o Configuration des paramètres généraux du module Videos Manager v of 21

9 FONCTIONNALITES FRONT OFFICE (FO) Fiche produit Vidéos liées au produit dans un nouveau sous onglet Onglets de navigation entre les différentes vidéos liées au produit Lecture de chaque vidéo en fonction de son lecteur et de sa source Page vidéos Page regroupant toutes les vidéos disponibles, classées par date d ajout, avec pagination et flux RSS. Bloc vidéos Bloc qui s affiche dans la colonne droite ou gauche et qui affiche les dernières vidéos ajoutées, ou une série de vidéos tirées au hasard. Short codes CMS Nouveau : système de «short codes» permettant d inclure des vidéos dans le contenu des pages CMS! Videos Manager v of 21

10 BO : GESTION VIDEO Vous pouvez gérer vos vidéos en utilisant l onglet principal Videos Manager ou directement depuis une fiche produit via le sous onglet Videos Manager. Videos Manager v of 21

11 BO : GESTION LECTEURS MEDIA Vous pouvez gérer les options des différents lecteurs en utilisant l onglet principal Videos Manager. Chaque vidéo ajoutée doit être liée à un lecteur média. Fonctionnalités des lecteurs jwplayer FlowPlayer Flash Oui Oui HTML 5 (ios) Oui Oui Image de couverture Oui Oui Boutons de contrôle Oui Oui Filigrane Oui Oui Sous titres Oui Oui Skins Oui Oui API javascript Oui Oui Plug ins Oui Oui Format vidéos jwplayer FlowPlayer H.264 (.mp4,.mov,.f4v) Oui Oui FLV (.flv) Oui Non 3GPP (.3gp,.3g2) Oui Non VP8 / WebM (.webm) Oui Oui Ogg Theora (.ogg) Oui Oui Videos Manager v of 21

12 Licence jwplayer Le lecteur jwplayer est gratuit pour une utilisation non commerciale. Dans le cadre d une utilisation avec une boutique PrestaShop, vous devez vous acquitter d une licence professionnelle. Le coût est de 99$/an pour un site. La version du lecteur fournie dans Videos Manager est la version gratuite, ses fonctionnalités sont donc limitées. Vous ne devez pas l utiliser dans un cadre commercial. Pour activer votre licence jwplayer 5, remplacez les fichiers jwplayer.js et player.swf dans le dossier suivant de votre boutique : modules/videosmanager/api/players/jw/player/ Pour activer votre licence jwplayer 6, entrez votre clef dans les paramètres de la source. License FlowPlayer Le lecteur FlowPlayer est gratuit pour une utilisation commerciale. La version du lecteur fournie dans Videos Manager est la version gratuite, ses fonctionnalités sont donc limitées. Pour activer votre licence FlowPlayer 5, entrez votre clef dans les paramètres de la source. Videos Manager v of 21

13 BO : GESTION SOURCES MEDIA Vous pouvez gérer les options des différentes sources en utilisant l onglet principal Videos Manager. Chaque vidéo ajoutée doit être liée à une source média. Fonctionnalités des sources HTML5 Pseudo streaming Streaming Download Localhost Oui Oui Non Oui YouTube Oui Oui Non Dailymotion Oui Oui Non Vimeo Oui Oui Non Amazon Web Service Oui Oui Oui DailyMotion Cloud Oui Oui Oui Vimeo Plus Oui Oui Non Bits on the Run Oui Oui Oui Infomaniak Oui Oui Oui Quelle source média choisir? Vous pouvez streamer vos vidéos soit depuis votre propre serveur web (localhost), soit depuis un des services externes supportés via API par Videos Manager. En utilisant la source localhost, vos vidéos ne seront pas véritablement disponibles en streaming : on appelle cela du progressive download, mais cela ne vous coûtera rien de plus que votre hébergement web actuel. En utilisant une source externe (un cloud/cdn), spécialisé dans le stockage/diffusion streaming, vous serez sûr d'avoir une qualité optimale pour vos clients. Videos Manager v of 21

14 Localhost La première source de médias possible est votre propre serveur web. Il suffit d y uploader vos fichiers vidéos via FTP : Dossier modules/ videosmanager/medias/videos/ Pseudo streaming En utilisant la source localhost, vos vidéos ne seront pas véritablement disponibles en streaming : on appelle cela du progressive download. Une solution est d utiliser le pseudo streaming http qui permet d une part d économiser de la bande passante et d autre part de démarrer une vidéo au milieu sans charger depuis le début du fichier. Pour utiliser le pseudo streaming : Installer le module de streaming H264 (Apache, Lighttpd, IIS and NginX) Désactiver la sécurité des vidéos (non compatible) Les vidéos doivent être encodées avec les codecs MPEG4/H264 (.mp4) YouTube Aucun paramètre d API. Dailymotion Aucun paramètre d API. Vimeo Aucun paramètre d API. API DailyMotion Cloud Vous pouvez utiliser les fichiers stockés sur le service DailyMotion Cloud. Pour cela, vous devez fournir vos identifiants API, disponible dans la section «Compte > Informations sur l'api» à l adresse API Amazon Web Service Vous pouvez utiliser les fichiers stockés sur le service Amazon Web Service. Pour cela, vous devez fournir vos identifiants API, disponible sur la Console de Gestion AWS dans la section «Références de sécurité» à l adresse portal.amazon.com/gp/aws/securitycredentials Attention : pour la clef privée CloudFront, celle ci est disponible UNIQUEMENT à la création de la paire de clé. Videos Manager v of 21

15 API Vimeo Plus Vous pouvez utiliser les fichiers stockés sur le service Vimeo Plus. Pour cela, vous devez créer une application ( puis fournir vos identifiants API. API Bits on the Run Vous pouvez utiliser les fichiers stockés sur le service Bits on the Run. Pour cela, vous devez fournir vos identifiants API, disponible dans la section «Settings > API Credentials > Get API Credentials» à l adresse API Infomaniak Vous pouvez utiliser les fichiers stockés sur le service Infomaniak. Pour cela, vous devez fournir votre identifiant espace VOD, disponible dans la section «VOD > Configuration» à l adresse Videos Manager v of 21

16 BO : SHORT CODES CMS Le module Videos Manager vous permet d insérer des vidéos très facilement dans le contenu de vos pages CMS, grâce à un système de «short codes» : Installation Pour activer le système de short codes, vous devez : Copier le fichier «modules/videosmanager/override/classes/cms.php» vers le dossier «override/classes/» Supprimer le fichier «cache/class_index.php» Amazon Web Services [aws p=2]video.mp4[/aws] Inclut la vidéo «video.mp4» depuis votre distribution CloudFront. L argument «p=2» est nécessaire afin de spécifier le lecteur vidéo utilisé (2 correspond au lecteur jwplayer 6). Bits on the Run [botr p=3]kf4weavj.mp4[/botr] Inclut la vidéo «Kf4WeAVJ.mp4» depuis votre compte Bits on the Run. L argument «p=3» est nécessaire afin de spécifier le lecteur vidéo utilisé (3 correspond au lecteur FlowPlayer). Dailymotion [dm]x15209u[/dm] Inclut la vidéo publique «x15209u» depuis Dailymotion. Aucun argument nécessaire pour le lecteur, car Dailymotion utilise son propre lecteur. Dailymotion Cloud [dmc]4fb14d4416fd3b1d c[/dmc] Inclut la vidéo «4fb14d4416fd3b1d c» depuis votre compte Dailymotion Cloud. Aucun argument nécessaire pour le lecteur, car Dailymotion Cloud utilise son propre lecteur. Infomaniak [ifk]11527/demo1 corail[/ifk] Inclut la vidéo «demo1 corail» depuis votre compte Infomaniak. Aucun argument nécessaire pour le lecteur, car Infomaniak utilise son propre lecteur. Videos Manager v of 21

17 Localhost [loc p=1]video.mp4[/loc] Inclut la vidéo «video.mp4» depuis votre serveur web localhost. L argument «p=1» est nécessaire afin de spécifier le lecteur vidéo utilisé (1 correspond au lecteur jwplayer 5). Vimeo [vm] [/vm] Inclut la vidéo publique « » depuis Vimeo. Aucun argument nécessaire pour le lecteur, car Vimeo utilise son propre lecteur. Vimeo Plus [vmp] [/vmp] Inclut la vidéo « » depuis votre compte Vimeo Plus. Aucun argument nécessaire pour le lecteur, car Vimeo Plus utilise son propre lecteur. YouTube [yt]gmgt3c3jcn4[/yt] Inclut la vidéo publique «gmgt3c3jcn4» depuis YouTube. Aucun argument nécessaire pour le lecteur, car YouTube utilise son propre lecteur. BO : AJOUTER DES TRADUCTIONS Le module Videos Manager est livré de base avec des traductions Français/Anglais. Si vous souhaitez supporter d autres langues de traduction (Allemand, Espagnol, Italien, Chinois ), il suffit d utiliser l outil de traduction offert par PrestaShop : 1) Ouvrez votre back office, cliquez sur l onglet «Localisation» puis «Traductions» 2) Dans «Modifier les traductions», choisissez «Traductions des modules installés», sélectionnez votre thème puis la langue souhaitée 3) Modifiez ou complétez les traductions à votre guise! Videos Manager v of 21

18 FO : FICHE PRODUIT Produit vidéo Lorsque vous ajoutez un fichier vidéo, il doit être lié à un produit. Ceci est donc automatiquement répercuté sur la fiche dudit produit, dans votre boutique (front office). Videos Manager v of 21

19 FO : BLOC COLONNE Colonne droite ou gauche Vous pouvez afficher un nouveau bloc dans la colonne droite ou gauche avec les dernières vidéos ajoutées ou en sélectionner aléatoirement. Videos Manager v of 21

20 FO : PAGE VIDEOS Vous pouvez afficher dans une page dédiée toutes les vidéos ajoutées avec pagination et flux RSS. Videos Manager v of 21

21 FO : PERSONNALISER L AFFICHAGE Il est possible de personnaliser l affichage du module Videos Manager, notamment pour l adapter à l apparence de votre boutique, sans pour autant modifier les fichiers originaux du module. Attention : un minimum de connaissances en HTML/CSS/JavaScript et Smarty est nécessaire. Il suffit de dupliquer les fichiers des templates du module dans le dossier de votre thème : 1) Créez un dossier nommé «videosmanager» dans le dossier themes/nom_du_theme/modules/ 2) Copiez dans ce nouveau dossier les fichiers originaux (.tpl,.css,.js) contenus dans le dossier et sous dossiers : modules/ videosmanager/views/templates/ 3) Modifiez à votre guise les fichiers copiés, ils seront automatiquement remplacés par votre thème! Videos Manager v of 21