VIDEOS MANAGER v1.1

 VIDEOS MANAGER v1.1 Documentation utilisateur ‐ Français Videos Manager v1.1 © 2014 ‐ 1 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 ......................................................................................................................................... 10 BO : GESTION LECTEURS MEDIA ........................................................................................................................ 11 Fonctionnalités des lecteurs ................................................................................................................................... 11 Format vidéos ......................................................................................................................................................... 11 Licence jwPlayer ..................................................................................................................................................... 12 License FlowPlayer .................................................................................................................................................. 12 BO : GESTION SOURCES MEDIA ......................................................................................................................... 13 Fonctionnalités des sources ................................................................................................................................... 13 Quelle source média choisir ? ................................................................................................................................. 13 Localhost ................................................................................................................................................................. 14 YouTube .................................................................................................................................................................. 14 Dailymotion ............................................................................................................................................................ 14 Vimeo ...................................................................................................................................................................... 14 API DailyMotion Cloud ............................................................................................................................................ 14 API Amazon Web Service ........................................................................................................................................ 14 API Vimeo Plus ........................................................................................................................................................ 15 Videos Manager v1.1 © 2014 ‐ 2 of 21 [ [email protected] ‐ http://www.dryss.com ] API Bits on the Run ................................................................................................................................................. 15 API Infomaniak ........................................................................................................................................................ 15 BO : SHORT‐CODES CMS .................................................................................................................................... 16 Installation .............................................................................................................................................................. 16 Amazon Web Services ............................................................................................................................................ 16 Bits on the Run ....................................................................................................................................................... 16 Dailymotion ............................................................................................................................................................ 16 Dailymotion Cloud .................................................................................................................................................. 16 Infomaniak .............................................................................................................................................................. 16 Localhost ................................................................................................................................................................. 17 Vimeo ...................................................................................................................................................................... 17 Vimeo Plus .............................................................................................................................................................. 17 YouTube .................................................................................................................................................................. 17 BO : AJOUTER DES TRADUCTIONS ..................................................................................................................... 17 FO : FICHE PRODUIT .......................................................................................................................................... 18 Produit vidéo .......................................................................................................................................................... 18 FO : BLOC COLONNE .......................................................................................................................................... 19 Colonne droite ou gauche ...................................................................................................................................... 19 FO : PAGE VIDEOS ............................................................................................................................................. 20 FO : PERSONNALISER L’AFFICHAGE ................................................................................................................... 21 Videos Manager v1.1 © 2014 ‐ 3 of 21 [ [email protected] ‐ http://www.dryss.com ] PRESENTATION Nom : Version : PrestaShop : Videos Manager 1.1 1.5 & 1.6 Auteur : Site : Email : DrÿSs’ Agency http://www.dryss.com [email protected] 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 ! http://www.dryss.com Videos Manager v1.1 © 2014 ‐ 4 of 21 [ [email protected] ‐ http://www.dryss.com ] INSTALLATION DU MODULE Prérequis Vous devez au préalable avoir installé une version fonctionnelle de PrestaShop version 1.5.x sur votre serveur : http://www.prestashop.com/fr/telechargement 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 v1.1 © 2014 ‐ 5 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 celui‐
ci (voir page précédente). Videos Manager v1.1 © 2014 ‐ 6 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 : http://www.longtailvideo.com/support/jw‐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 : http://handbrake.fr Choisissez le codec MP4/H.264, optimisé pour le web : Videos Manager v1.1 © 2014 ‐ 7 of 21 [ [email protected] ‐ http://www.dryss.com ] FONCTIONNALITES BACK‐OFFICE (BO) Ajout d’un onglet Videos Manager dans le menu du back‐office avec : 




Vidéos o Listing des vidéos avec classement/filtre o Ajout/modification/suppression de vidéos (source, sous‐titres, couverture, preview, etc.) o 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 v1.1 © 2014 ‐ 8 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 v1.1 © 2014 ‐ 9 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 v1.1 © 2014 ‐ 10 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 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 Format vidéos Videos Manager v1.1 © 2014 ‐ 11 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 v1.1 © 2014 ‐ 12 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 v1.1 © 2014 ‐ 13 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 http://www.dmcloud.net/backoffice/settings/user/ 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 https://aws‐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 v1.1 © 2014 ‐ 14 of 21 [ [email protected] ‐ http://www.dryss.com ] API Vimeo Plus Vous pouvez utiliser les fichiers stockés sur le service Vimeo Plus. Pour cela, vous devez créer une application (https://developer.vimeo.com/apps) 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 http://dashboard.bitsontherun.com/settings/ 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 https://statslive.infomaniak.com/vod/configuration.php Videos Manager v1.1 © 2014 ‐ 15 of 21 [ [email protected] ‐ http://www.dryss.com ] 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]4fb14d4416fd3b1d2100060c[/dmc] Inclut la vidéo « 4fb14d4416fd3b1d2100060c » 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 v1.1 © 2014 ‐ 16 of 21 [ [email protected] ‐ http://www.dryss.com ] 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]76418753[/vm] Inclut la vidéo publique « 76418753 » depuis Vimeo. Aucun argument nécessaire pour le lecteur, car Vimeo utilise son propre lecteur. Vimeo Plus [vmp]49258327[/vmp] Inclut la vidéo « 49258327 » 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 v1.1 © 2014 ‐ 17 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 v1.1 © 2014 ‐ 18 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 v1.1 © 2014 ‐ 19 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 v1.1 © 2014 ‐ 20 of 21 [ [email protected] ‐ http://www.dryss.com ] 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 v1.1 © 2014 ‐ 21 of 21 [ [email protected] ‐ http://www.dryss.com ]