Kommunauty
Connexion
Inscription

Installer un lecteur vidéo sur son site

le 24 avril 2011 • Programmation • par SiMax

De plus en plus de sites proposent à leurs visiteurs des vidéos directement intégrées dans les pages web, en streaming, à la manière de Youtube.

Nous allons expliquer ici comment intégrer une vidéo sur un site web de A à Z.

Quelques explications

Les vidéos, sous n'importe quel format, ont besoin d'un lecteur pour les déchiffrer et les afficher. Ce lecteur peut être un logiciel sur votre PC (Windows Media Player, VLC...) mais ce n'est pas la seule manière de lire une vidéo. FLASH Player, un mini-logiciel installé sur la majorité des ordinateurs, permet de lire du contenu de type "FLASH". Et bien sûr, il est possible d'intégrer ce fameux FLASH au milieu de pages HTML, donc sur un site web.

Nous allons donc nous servir de FLASH comme lecteur de vidéo (comme sur Youtube) avec de quoi afficher la vidéo, le son, les boutons play/pause, etc. pour afficher des vidéos.

Le format des vidéos

Les lecteurs de vidéos FLASH ne peuvent pas lire n'importe quel type de vidéo. En règle générale, les lecteurs lisent les vidéos au format .flv. Il faudra donc faire attention à bien convertir toutes les vidéos avant de les publier. Je vous invite pour cela à jeter un coup d'oeil à mon tutoriel qui explique comment convertir une vidéo pour un site web.

Une fois la vidéo convertie, il suffit de l'envoyer chez votre hébergeur, avec un logiciel FTP comme Filezilla.

Installer un lecteur de vidéo

Le lecteur est en fait un élément FLASH auquel il suffit de transmettre l'emplacement de la vidéo à lire (celle que vous venez de convertir et d'envoyer sur votre FTP). Le lecteur doit aussi être hébergé sur votre site. Une fois que vous l'avez, vous pouvez l'utiliser pour toutes vos vidéos.

Alors bien sûr, je vais pas vous demander de coder vous-même le player, ça serait compliqué. Et heureusement, de gentils codeurs ont pensé à vous : ils partagent gratuitement des lecteurs qu'ils ont codé. Il ne vous reste plus qu'à choisir celui qui vous convient le mieux et à l'installer sur votre site !

Pour vous aider dans votre choix, j'ai dressé une liste des 8 player video gratuits que je préfère. Chacun a un site dédié à sa présentation, avec des exemples et de la documentation.

Voir la liste des 8 player video gratuits »


Normalement, vous n'avez qu'à télécharger le player et copier-coller le code pour l'intégrer (qui est donné sur le site de chaque player). Tous les codes pour intégrer les players ressemblent à peu près à celui-ci (qui est le code pour DewPlayer) :

<object type="application/x-shockwave-flash"
data="dewtube.swf" width="512" height="384">
<param name="movie" value="dewtube.swf" />
<param name="flashvars" value="movie=video.flv&width=512&height=384" />
</object>

Vous aurez par exemple à modifier :

  • dewtube.swf : L'emplacement du player video sur votre site
  • width="512" : La largeur du lecteur
  • height="384" : La hauteur du lecteur
  • movie=video.flv&width=512&height=384 : L'emplacement de la vidéo, suivi des dimensions du lecteur

Rien de bien compliqué donc, juste des codes à adapter selon vos besoins. Et si jamais vous ne comprenez pas tout, n'hésitez pas à poser vos questions en commentaire ici ou à demander de l'aide

  
21 commentaires

Bonjour, j'ai du mal a intégrer le lecteur de JW player 5, quelqu'un peut m'aider ?

le 8 juin 2011

Salut ! Où est-ce que tu as du mal ? Tu as téléchargé le lecteur et les exemples déjà ?

le 8 juin 2011

Salut, enfaîte je créer un site (sous Wordpress) pour des vidéos pour les joueurs du MMO DOFUS, et je n'arrive pas a trouver ou a faire le code pour l’intégrer dans l'article, comme Dewplayer

<object type="application/x-shockwave-flash"
data="dewtube.swf" width="512" height="384">
<param name="movie" value="dewtube.swf" />
<param name="flashvars" value="movie=video.flv&width=512&height=384" />
</object>

sinon je suppose que c'est Wordpress qui désactive le code ?.

J'ai suivi tous ce qu'il y a sur cette page.

le 9 juin 2011

Essaye peut-être d'utiliser un plugin si t'arrive pas comme ça : http://wordpress.org/extend/plugins/flash-video-player/

le 9 juin 2011

Ouai, j'ai déjà test cette sort de plugin mais le problème c'est que mon site a un thème personnalisé, et quand tu écris un article tu a plusieurs option âpre :

IMAGE

le 9 juin 2011

Mais ce plugin là tu l'as installé ?

le 9 juin 2011

Oui, mais le code "[flashvideo file=video/video.flv /]" ne marche pas dans le champ de "Vidéo Embed Code".

le 9 juin 2011

Tu dois mettre le code directement dans l'article et pas dans un des champs en dessous

le 9 juin 2011

Ouai mais le thème et spécial pour les vidéo, voila une page exemples : http://kreatofus.free.fr/dofusmotion/?p=1 : ou il y a la vidéo des "10 an D'ankama" c'est le champ "Vidéo Embed Code" et enfaîte le champ de l'article c'est la description de la vidéo.

le 9 juin 2011

Bah ça marche là, non ?

le 10 juin 2011

Ouai, mais j'aurais voulus mon Player vidéo pour les vidéo héberger sur mon serveur , mais c'est pas grave je vais rester sur YouTube, Dailymotion, Wat '

le 10 juin 2011

Ah oui, là c'est pas une vidéo de ton site ! Bah si tu arrive pas à installer les plugins, je te conseille de laisser les vidéos comme ça et d'apprendre le HTML/PHP, comme ça plus tard tu arriveras à faire ce que tu veux

le 10 juin 2011

bonjour j aurai besoin d aide car je n arrive pas a installer le Open Standard Media (OSM) Player sur mon site et ces celui qui m intéresse car j'en cherche un avec une playlist merci de vos réponse

le 13 juillet 2011

Bonjour à tous,

J'ai besoin d'aide... Intégrer un lecteur vidéo et lire la vidéo ça va. Mais j'aimerais que dans le même player sur une page, je puisse jouer plusieurs vidéo sélectionné dans un menu sur cette même page.

J'ai déjà vu des sites ou cela est possible... mais même en regardant le code source, je n'y pige rien.

Quelqu'un peut m'aider ?

Merci!

le 1 juin 2012

Salut ! OSM Player fait ça normalement. Regarde dans l'onget Playlists de leur site, il y a aussi un exemple de code.

le 2 juin 2012

Sinon, pour les fans de HTML5, mais qui à des internautes, qui n'ont pas forcément de navigateur moderne, il y a : LeanBack Player Generator HTML5/Flash et Video For Everybody Generator !

le 18 aout 2012

bonjour, j ai installé dewtube ds page html (le code) le player s'affiche mais la vidéo n'est pas lue , pourriez-vous vérifier le code ,merci

<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240">
        <param name="src" value="videos/player_flv_mini.swf">
<param name="movie"="src" value="videos/player_flv_mini.swf" />
        <param name=quality value=high>
        <param name="flashvars" value="movie=videos/BlancheNeige.flv&width=320&height=240"/ >
 <embed src="videos/player_flv_mini.swf" quality=high
 pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="320" height="240">
</embed></object>
le 11 novembre 2012

Salut ! Impossible de t'aider avec juste ça. Quelle est l'adresse de la page HTML en question ?

le 11 novembre 2012

bonjour simax , je travail en local donc cette page n'est pas sur l'hébergeur actuellement

faut il que je la place ?

le 11 novembre 2012

Oui

le 12 novembre 2012

problème résolu avec dewtube,

il suffit de dezip dewtube en un seul dossier et d'intégrer celui ci dans le site,

il comprend le player ,le skin et un autre fichier, ensuite placer les vidéos ds ce dossier,

puis insérer le code ds la page html et donner les url même relatives et ca fonctionne

le 13 novembre 2012



Ajoute un commentaire !

Ajouter une image... Trouvée sur internet » De mon PC »
Adresse URL :
Adresse de la page de la vidéo :
Taille du texte :
Couleur du texte :

Article lu 26604 fois.