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 un jeu de type Portal…
Ce tuto HTML5/JS vous permettra de découvrir comment réaliser…
Apprendre le Responsive Design…
Dans cette formation Responsive Design signée Elephorm, vous…
Créer un site One Page complet…
Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir…
Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…
Formation Html5 et CSS3
Voici une formation à la découverte de l'HTML5 et du CSS3.…
Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…
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 :
simpledev
, formateur certifié
Toutes les formations de Simpledev
Témoignage des clients de simpledev
![]()
Tutoriel clair et précis. Continuez ainsi :)
![]()
Tuto sur le codeigniter excellent par contre existe t il un tuto sur la création d'un back office avec codeigniter. Si oui, je suis fortement intéressée...
![]()
Superbes tutos pour apprendre Laravel ! Continue comme ça :D
![]()
Merci beaucoup pour tes tutorial que j'adore :D
![]()
Très bon formateur de bonne qualité. J'aime.
Lire les autres témoignages
D'autres tuto de simpledev
Jquery : 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 explorer
Dans ce tuto CSS 3 en vidéo, nous verrons comment utiliser CSS3 PIE pour que les propriétés…
Ruby : les boucles
Dans ce tuto ruby en video, nous verrons comment utiliser les boucles. Nous verrons donc…
Ruby : tableaux et hachages
Dans ce tuto ruby en video, nous verrons comment fonctionnent les tableaux et les hachages.…
Notes attribuées par les utilisateurs (5 votes)
Les avis / Questions des utilisateurs (21)
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é 195 fois et a reçu une note moyenne de 5/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.















(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 "
(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. "
(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. "
(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:) "
(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 ??? "
(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 "
(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 !!! "
(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}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<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 "
(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}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="video/fond.png" width="1280" height="720" alt="Poster Image" "
(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 "
(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 !!! "
(a acheté ce tuto - 30 mars 2011)
" ok merci pour tout
"
(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. "
(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 ? "
(auteur de ce tuto - 30 mars 2011)
" Merci Heubs! a+ "
(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 "
(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. "
(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 "
(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. "
(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 "
(a acheté ce tuto - 28 mars 2011)
" super "