Dans ce tuto HTML 5 et Jquery en vidéo, nous découvrirons comment utiliser le plugin jquery "videojs" qui permet de mettre en place un lecteur vidéo HTML5 compatible avec tous les navigateurs, même avec Internet Explorer :)

Nous téléchargerons donc le plugin videojs sur le site de l'éditeur, puis nous mettrons en place le lecteur avec très peu de code.

Bon tuto!

Jetez un oeil à ces autres tuto HTML 5

Créer une application autour de moi en HTML5Créer une application autour…
Dans ce tuto HTML5 en vidéo, nous allons voir comment créer…

Pack : Créer votre site Internet, les bases pour débutantsPack : Créer votre site Internet,…
Dans ce pack, nous allons vous donner toutes les bases HTML…

Aller plus loin en HTML5 : Le drag and dropAller plus loin en HTML5 :…
Gérez le glissé/déposé avec JavaScript Vous êtes développeur…

Création et montage HTML / CSS d'un thème E-CommerceCréation et montage HTML…
Nous allons apprendre à créer un thème de site qui pourra…

Créer un site One Page complet de A à ZCréer un site One Page complet…
Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir…

Montage HTML / CSS d'un site Internet ResponsiveMontage HTML / CSS d'un site…
Voici une formation sur le découpage et l'intégration d'un…

Créer un portfolio full responsive en HTML5 et CSS3Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…

Administration en AJAX et HTML5Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto HTML 5 de 15 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

simpledev , formateur certifié



Toutes les formations de Simpledev


Témoignage des clients de simpledev

Un très bon formateur qui va au bout de ses explications. Ses tutoriels sont de qualité et je les recommande fortement ! Merci à vous pour ce que vous m'avez appris !

SimpleDev, tu es vraiment génial.2 ans que je te suis et ne te connais qu'a travers tes tutos mais passionné comme tu l' es , tu m'a donné l'envie d'avancer dans ce métier MERCI

De très bonne idée de tuto très bien réalisé . je recommande

Grâce à vos vidéos je commence à accélérer, vraiment merci. j’essaie de le pratiquer et de développer. Merci

Merci pour les tuto qui vraiment me font du bien

Lire les autres témoignages

 

D'autres tuto de simpledev

Jquery : découvrez le Plugin jLabelJquery : découvrez le Plugin jLabel
Dans ce tuto Jquery gratuit et en vidéo, nous découvrirons le plugin jLabel. Ce plugin…

CSS3 PIE : css3 sur internet explorerCSS3 PIE : css3 sur internet explorer
Dans ce tuto CSS 3 en vidéo, nous verrons comment utiliser CSS3 PIE pour que les propriétés…

Ruby : les bouclesRuby : les boucles
Dans ce tuto ruby en video, nous verrons comment utiliser les boucles. Nous verrons donc…

Ruby : tableaux et hachagesRuby : tableaux et hachages
Dans ce tuto ruby en video, nous verrons comment fonctionnent les tableaux et les hachages.…

voir tous les tuto de simpledev

Notes attribuées par les utilisateurs (6 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (22)

par andrezinho18a voté :
(a acheté ce tuto - 08 novembre 2013)

" super! Par contre je n'arrive pas à centrer la video :s "

par sampabsa voté :
(a acheté ce tuto - 30 juin 2011)

" J'aurais aimé voir comment ajouter des sous-titres... Cela peut faire l'objet d'un nouveau tuto ?
Merci "

par simpledev
(auteur de ce tuto - 12 mai 2011)

" @titou007 Oui le player fonctionne indépendamment de le version html. Si le navigateur n'interprète pas la balise video, c'est un player flash qui sera affiché au visiteur. "

par titou007
(a acheté ce tuto - 11 mai 2011)

" Bonjour,
Je souhaiterais savoir ce player fonctionne aussi en xHTML (DTD XHTML 1.0 Strict) ou pas ? Et sinon existe t-il une solution semblable pour mon cas?
Cordialement. "

par simpledev
(auteur de ce tuto - 01 avril 2011)

" ca doit surement être ça, je pense pas qu'il reconnaisse le css3 comme étant valide, mais te prends pas la tête avec la validation w3c sinon t'as pas fini:) "

par heubsa voté :
(a acheté ce tuto - 31 mars 2011)

" tuto refait en entier et tout est OK !!!
merci pour tout et milles excuses pour le dérangement :(

remarque : W3C css validator me trouve des erreurs sur "video-js.css"
est-ce du au fait qu'il ne reconnait pas le css3 ou (encore) erreur de ma part ??? "

par heubsa voté :
(a acheté ce tuto - 31 mars 2011)

" ENFIN !!!
l'erreur venait de ma vidéo (surement mauvais conversion)
j'ai testé avec une autre video et tout est OK
pour ajouter d'autres videos je dois les mettre a la suite des videos utilisées dans ce tuto ?
merci "

par heubsa voté :
(a acheté ce tuto - 30 mars 2011)

" exact !!!
j'ai corrigé le jpg en png et ca va un peu mieux.
j'ai bien le lecteur, le fond, et quand je lance lecture j'ai le son mais pas l'image !!! je me rapproche !!! "

par simpledev
(auteur de ce tuto - 30 mars 2011)

" il faut que tu mettes les chemins absolus et non relatifs

<param name="flashvars" value='config={"playlist":["img src="chemin_vers_ton_dossier/videos/fond.jpg",{"url":src= chemin_vers_ton_dossier/videojs/videos/harrypotter.mp4","autoPlay":false,"autoBuffering":true}]}' />
&lt;!-- Image Fallback. Typically the same as the poster image. --&gt;
<img src=chemin_vers_ton_dossier/"video/fond.png" width="1280" height="720" alt="Poster Image" "

je remarque aussi que tu as mis fond.jpg et au dessous fond.png "

par heubsa voté :
(a acheté ce tuto - 30 mars 2011)

" non vraiment ca ne veut pas !!!
pas de fond ni de video !!!
il y aurait il une erreur ???
<param name="flashvars" value='config={"playlist":["img src="videos/fond.jpg",{"url":src= videojs/videos/harrypotter.mp4","autoPlay":false,"autoBuffering":true}]}' />
&lt;!-- Image Fallback. Typically the same as the poster image. --&gt;
<img src="video/fond.png" width="1280" height="720" alt="Poster Image" "

par simpledev
(auteur de ce tuto - 30 mars 2011)

" il faut que tu mettes le chemin qui mène à ton image.
Si ton image nommée "fond.jpg" se trouve dans un dossier nommé "images" au même niveau que ton fichier index, tu mets : <img src="images/fond.jpg" comme adresse, c'est pas compliqué tu vas y arriver "

par heubsa voté :
(a acheté ce tuto - 30 mars 2011)

" bon j'ai beau mettre tous les noms possibles ca ne fonctionne toujours pas :(
tant pis pour le lecteur !!! "

par heubsa voté :
(a acheté ce tuto - 30 mars 2011)

" ok merci pour tout
"

par simpledev
(auteur de ce tuto - 30 mars 2011)

" c'est l'adresse du serveur local installé sur la machine lorsque l'on installe wamp :) mais oublie cette adresse localhost, remplace là par le chemin du dossier où se trouve ton image à toi. "

par heubsa voté :
(a acheté ce tuto - 30 mars 2011)

" une derniere question (apres j'arrete, promis !!!)
dans le tuto vous donnez une url a l'image fond, a la vidéo (http://localhost/...)
cependant je ne parviens a rien avec cette adresse, pas d'acces a local host
une idée d'ou cela peut venir ? "

par simpledev
(auteur de ce tuto - 30 mars 2011)

" Merci Heubs! a+ "

par heubsa voté :
(a acheté ce tuto - 30 mars 2011)

" encore merci pour cette réponse claire, précise et rapide :)
je vais faire des essais (j'y arriverai tot ou tard !!!)
et svp continuez a partager vos connaissances au travers de vos magnifiques tuto !!!
bonne continuation "

par simpledev
(auteur de ce tuto - 30 mars 2011)

" Si comme je te dis il faut que tu fasses des ancres qui pointent vers les videos dans la page, par exemple : <a href="#video1"> , <a href="#video2"> (des ancres sont des liens qui pointe vers un élément de la même page)
Mais ensuite il faut afficher et cacher les éléments en fonction du clic du visiteur sur telle ou telle ancre, mais ça c'est possible uniquement en javascript.

Tu ne pourras pas lancer les videos par des liens mais uniquement les afficher et les cacher. "

par heubsa voté :
(a acheté ce tuto - 30 mars 2011)

" merci de votre réponse très rapide :)
ca m'a l'air un peu compliqué (je débute :( !!! )
je pensais qu'il etait possible d'ecrire un code du genre :
" href="video1 " , "href=video2",...
cela n'existe pas ?
encore merci "

par simpledev
(auteur de ce tuto - 30 mars 2011)

" Le mieux c'est que tu insères les 3 videos sur la même page avec pour chaque video un id par exemple <video id="1"> etc.. Ensuite tu fais 3 ancres qui pointent vers leurs videos réspectives et tu cache les videos 2 et 3 au chargement de la page. Ensuite tu affiche la video demandé lors du clic de l'utilisateur sur une ancre et tu cache les 2 autres, tout ça en javascript avec jquery bien evidemment. "

par heubsa voté :
(a acheté ce tuto - 30 mars 2011)

" merci pour ce superbe tuto !!!
simple mais efficace !
j aimerais inserer plusieures videos lancées par des liens (par exemple lien "A" => vidéo "A" ; lien "B" => vidéo "B"; ...etc) sur le meme lecteur et sur la meme page
est ce possible ?
merci "

par bigpatcoola voté :
(a acheté ce tuto - 28 mars 2011)

" super "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto HTML 5 d’une durée de 15 minutes a été acheté 216 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 12 mars 2011 par simpledev, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,4/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto HTML video.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !