Astuce avancée : insérer un lecteur vidéo html 5

Vous avez été nombreux à nous le demander, alors voici une astuce rapide et efficace pour intégrer le plugin Video.JS, un lecteur vidéo HTML 5 (compatible avec tous les dispositifs mobiles) afin d’agrémenter vos sites ! Le petit plus ? Vous pourrez personnaliser ses dimensions et intégrer une vidéo en différents formats pour qu’elle soit visible sur tous les navigateurs. Nous vous rappelons qu’aucun standard vidéo n’est actuellement en place sur les différents navigateurs. Vous trouverez ci-dessous un tableau récapitulatif des formats.

 

Rendez-vous sur la page : http://videojs.com/getting-started/ et la rubrique Video.js CDN »

Le site est disponible uniquement en Anglais.

Voici l’exemple de code à insérer dans la partie Head de votre projet de site (dans WebAcappella menu site web, propriétés, 4ème onglet) :

<head> <link href="http://vjs.zencdn.net/6.2.8/video-js.css" rel="stylesheet"> <!-- If you'd like to support IE8 --> <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> </head>

Ensuite vous devrez intégrer dans une zone de code HTML, sur la page où vous souhaitez voir apparaître votre vidéo, le code suivant :

<body> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}"> <source src="MY_VIDEO.mp4" type='video/mp4'> <source src="MY_VIDEO.webm" type='video/webm'> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> <script src="http://vjs.zencdn.net/6.2.8/video.js"></script> </body>

Il vous faudra personnaliser ce code avec vos éléments :

– Width et Height : cela correspond à la taille de la fenêtre de votre vidéo (en pixels, mais attention au format d’origine)

– Poster : il s’agit de l’image qui apparaît avant le démarrage de votre vidéo (elle n’est pas obligatoire)

– Source : emplacement du fichier vidéo correspondant au format souhaité (mp4, webm ou ogg).

Vous pouvez intégrer 1, 2 ou les 3 formats, à vous de voir. Nous vous conseillons de créer les 3 formats pour chaque fichier vidéo afin d’avoir une compatibilité avec tous les navigateurs.

A bientôt pour le prochain article !

16 Comments

  1. Dominique

    Il serait plus simple d’intégrer un lecteur .mp4 que de devoir publier à la racine avec un logiciel de type filezilla d’autant plus que dans les premières versions de Cariboost un lecteur WMP existait et qu’il intégrerait très bien le mp4. Votre lecteur .flv semble un peu ringard maintenant.

    • Team WebAcappella

      Bonjour Dominique,

      Merci pour vos messages ! Nous comprenons vos questionnements sur le lecteur video.

      Le lecteur vidéo de WebAcappella 4 permet l’intégration de vidéos hébergées en ligne (youtube…) L’avantage de ce système est que les vidéos en ligne sont lisibles et compatibles avec tous les navigateurs !

      Nous ne proposons pas de lecteur au format mp4 car il ne pourrait pas être lisible sur tous les navigateurs et par conséquence nous ne pourrions garantir l’affichage de vos vidéos sur tous les navigateurs.

      Concernant le lecteur flash, il est intégré dans les éléments de la version précédente du logiciel (version 3), et comme la technologie flash est peu à peu abandonnée par les différents éditeurs de navigateurs, ce format n’est plus proposé comme élément de la V4.

      Pour tout savoir sur l’intégration des vidéos vous pouvez consulter notre tuto sur le blog : https://blogwebacappella.fr/2013/05/16/astuce-avancee-inserer-un-lecteur-video-html-5/

      Ce tutoriel comme indiqué dans le titre « avancé » pour intégrer un lecteur HTML 5 externe a été publié suite à de nombreuses demandes de nos utilisateurs. Aussi n’hésitez pas à nous faire part des sujets que vous souhaiteriez que nous traitions dans le blog. 🙂

  2. lallemand

    Bonjour,

    Cela me semble super intéressant mais ou dois-je mettre ma vidéo en MP4? J’ai une vidéo sur mon pc, et j’aimerai la diffuser sur le site via votre petite appli. Je dois enregistrer cette vidéo dans quel dossier ? et ensuite que dois-je mettre dans le code source src ?

    Merci de votre aide et encore bravo pour vos améliorations et votre blog

    Un utilisateur ravi ^_^

    • Team WebAcappella

      Bonjour !

      Vous devez envoyer à la racine de votre dossier de projet de site (par Filezilla par exemple) votre fichier video .mp4 et ensuite reprendre l’exemple du code de l’article en modifiant bien entendu des elements (comme le nom du fichier).

      Bonne journée !

  3. Dominique

    Attention !!!!! En mettant votre fichier à la racine il y a un risque de faire disparaître tout le contenu de votre site et de ne plus avoir que le fichier publié à la racine……. Pourquoi Webacapella n’édite pas un lecteur mp4 ????????????

    • Team WebAcappella

      Bonjour Dominique !
      Notre équipe technique n’a pas constaté de soucis du fait de mettre le fichier avec la vidéo à la racine du site.

  4. Dominique

    Ne laissez pas des novices partir en terre inconnue avec ce lecteur. mp4… que vous n’êtes pas vous-mêmes capables de fournir à vos clients…… C’est un comble !!!!!!!

  5. lars

    Salut, à quand une une intégration dans le soft avoir que du flash comme lecteur c un peu limite aujourd’hui..

  6. Fogiel

    J’ai essayé d’insérer le lecteur vidéo html 5 que vous préconisez, mais sans y parvenir.

    Quand j’ouvre ma page sur Safari, l’image (poster) est visible, mais quand je lance le film il ne fonctionne pas : on voit seulement un espace noir avec une roue qui tourne.

    Voici ce que j’ai fait :

    J’ai copié/recopié les deux lignes prévues pour le Head des propriétés du site, sans rien rectifier.

    J’ai copié/collé le code html dans la fenêtre de dialogue (de Insérer Code html). J’ai fait deux remplacements :
    – l’un pour donner le nom du film (ci-dessous correspondant à monimage.jpg)
    – l’autre pour indiquer le chemin absolu du dossier distant contenant le film (ci-dessous correspondant à cheminabsoludossier/monfilm.mp4)

    Petite précision : mon serveur est un hébergeur payant.
    Merci de m’indiquer où est l’erreur … et félicitation pour nous faire désormais progresser grâce aux « Astuces ».
    Cordialement,
    Benji

  7. lallemand

    Merci beaucoup. a priori, petit problème car sur Chrome, cela ne se lance pas…

    Bonne soirée

  8. Fogiel

    Suite de « J’ai essayé d’insérer le lecteur vidéo html 5 ». Je m’aperçois que j’ai fais une coquille dans mon texte. il faut lire « donner le nom de mon image » au lieu de « donner le nom du film ».
    J’avais entré dans mon commentaire le texte du code que j’avais inséré dans ma page, mais celui-ci ne paraît pas mes commentaires.
    Beni

  9. Fogiel

    Suite et fin de « J’ai essayé d’insérer le lecteur vidéo html 5 »
    Contrairement à ce qu’indique la notice pour « source src », Il ne faut surtout pas indiquer l’emplacement du fichier vidéo.
    En fait, il faut seulement remplacer le/les « gregdemo.***» par le/les vrais noms de fichiers film.
    Cordialement,
    Benji

  10. Fogiel

    Insérer un lecteur vidéo re-suite et fin : problème avec firefox … mais solutionné.
    Je me suis aperçus que ça marchait avec Safari, mais pas avec Firefox (je suis sur Mac, je n’ai pas testé Internet explorer).
    Après de multiples bidouillages, j’ai enfin trouvé la solution : il faut placer la ligne de code (source src) concernant video/ogg avant celle de mp4, elle-même suivie de celle concernbant webm.
    A croire que Firefox ne sait pas passer à la ligne suivante ?
    Benji

    • Team WebAcappella

      Bonjour Benji !
      En effet, le navigateur normalement détecte automatiquement le format compatible (si plusieurs formats sont présents)…
      Merci pour vos encouragements pour nos tutos 🙂

  11. SEVE

    Bonjour, je suis fortement intéressé par ce post concernant l’insertion du lecteur vidéo.
    J’ai crée un site « familial » ( WEBACAPPELLA version intégrale) qui fonctionne très bien depuis 4 mois. Avant chaque modif je fais mes tests sur mon PC (dossier dans d:\site_mission\) puis j’envoie le tout par FILEZILA sur le serveur distant (fournisseur SFR).

    Je rencontre des difficultés à insérer le lecteur selon vos instructions. J’ai fait des essais avec un fichier appelé « test.mp4 ». Le lecteur s’affiche bien sur la page WEB (avec un fichier *.png en exemple) mais j’ai le message suivant : « aucune vidéo dont le format ou le type MIME est géré n’a été trouvé ».
    Je suis sûr de mon fichier MP4, mais je crois que le ou les chemins sont erronés et qu’il y a erreurs dans mes lignes de codes.
    De fait plusieurs questions sachant que mon site se trouve ds un dossier appelé « mission_2013 »:
    – où dois je copier mon fichier vidéo ?
    – une fois décompressés les fichiers du plugin se trouvent bien ds un sous-dossier « video-js » dans « mission_2013 » ?

    Je vous remercie pour vos réponses.

    Voici les lignes de code :

    • Team WebAcappella

      Bonjour Seve et merci pour votre intérêt par ce post !
      Notre équipe technique est à votre disposition pour vous aider !
      Sur votre espace client connectez vous au support technique. Vous pourrez leur envoyer votre code et échanger directement avec eux.
      Bonne journée !

Commentaires fermés