Aller au contenu

Comment ajouter un player video HTML5 compatible google chrome firefox safari internet explorer

Et voici la suite du cours précédent sur le player audio. Maintenant, vous allez apprendre à ajouter un player vidéo compatible avec la majorité des navigateurs internet (Google Chrome, Safari, Firefox, Internet Explorer…).

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment ajouter un player video HTML5 compatible Google chrome, Firefox, Safari et Internet Explorer ?

Bonjour à tous et bienvenu sur Développement Facile.

On continu ensemble votre apprentissage de l’HTML 5, rappelez-vous dans le cours précédent vous avez appris à implémenter un lecteur audio dans vos pages HTML, dans vos sites Internet. Maintenant vous allez apprendre à implémenter un lecteur vidéo directement en html 5, donc plus besoin d’utiliser le flash player, plus besoin de savoir coder en ActionScript 3, non, une seule balise suffit pour ajouter des vidéo en HTML 5.

L’ajout d’un fichier vidéo

Si vous avez compris comment utiliser la balise audio, je vais aller un peu plus vite pour la balise vidéo car c’est exactement la même chose. La balise vidéo ou vous spécifiez dans l’attribut sur l’adresse du fichier vidéo qui peut être hébergé sur votre site Internet, sur un autre site internet, l’attribut contrôle pour afficher les contrôles du lecteur vidéo, ou pas, lecture, arrêt, avancement, volume, width la largeur de la vidéo, height la hauteur la vidéo, auto Play pour lire automatiquement, dès que la page est chargée, le fichier vidéo il se met en chargement, une petite note youtube utilise maintenant pour certains utilisateurs le player adobe flash, et pour d’autres utilisateurs son player video en HTML 5 et c’est exactement le même principe de fonctionnement. Loop pour jouer le fichier vidéo en boucle, donc une fois qu’il a terminé il retourne au début, il joue en boucle, et preload pour activer le pré chargement de la vidéo, donc lors du chargement de la page,
Preload = none ça veut dire qu’il n’y a pas de pré chargement du tout, preload = metadata, on précharge les metadata de la vidéo,
Preload = auto il y a un pré chargement automatique de la vidéo, très pratique comme ça dès que l’utilisateur appui sur Play, la vidéo se lance instantanément.

Voici un exemple de code source, balise vidéo, source intro.mp4 avec le contrôles et le pré chargement, on met un petit message, votre navigateur ne supporte à la balise audio, pour les navigateurs, sur certaines tablettes ou certains Smartphones, ils y en a qui ne comprennent pas le HTML 5, et pour les autres ça affichera le player vidéo, la vidéo.

Les formats pris en charge

Les formats qui sont pris en charge, vous avez le format ogv, c’est l’équivalent de l’extension ogg pour le fichier audio, c’est un format libre pour la vidéo.
Le fameux format h.264 qui est énormément utilisé par Apple, Youtube, Dailymotion, c’est un codec de compression vidéo haute définition à la norme MP4, il faut savoir que c’est un format propriétaire soumis à des redevances et des royalties, ce format h.264, justement il va évoluer donc il y a un petit combat entre le h.265 qui est toujours un format propriétaire au format webm qui est acheté par Google, Google est propriétaire du codec vidéo VP8 et c’est un format libre et j’espère que ce format réussira à s’imposer de façon h.265 comme ça il n’y aura plus de redevances ou de royalties à venir.

La balise <source>

Comme pour l’audio, vous avez la balise source pour spécifier plusieurs fichiers audio, vidéo pardon, bien évidemment chaque navigateur prend en charge ses extensions qu’il a choisi, FireFox, Google Chrome, opéra, Safari, tous ne supportent pas toutes les balises vidéos, donc vous allez utiliser la balise source pour spécifier un fichier vidéo avec un format différent, au format ogv, au format mp4, au format webm comme ça vous serez sûr que votre vidéo sera lisible par la majorité des navigateurs récents, très important que vos sites Internet soient au maximum compatible avec le plus de navigateurs possible, rendez-vous compte les utilisateurs il ont un ordinateur portable pour surfer sur Internet, ils ont une tablette pour surfer sur votre site web, ils ont un Smartphone, ils ont tout un tas de périphérique, même une télé avec une télé on surfe sur internet, avec HTML 5 vous avez l’avantage que ce langage est pris en compte par de nombreux navigateurs, profitez-en.

Votre plan d’actions !

Comme d’habitude vous trouverez un exemple de code source sous cette vidéo, maintenant vous êtes capables d’ajouter des Player vidéo sur vos site Internet, donc amusez-vous, profitez-en, si vous avez des questions, posez-les directement sous ce cours vidéo. Je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source HTML5

Voici un player vidéo compatible multi-navigateurs !

Téléchargement du code source Exemple Player Vidéo HTML5

Cliquez ici pour télécharger le code source Exemple Player Vidéo HTML5

Rendez-vous sur www.online-convert.com/fr pour convertir vos vidéos dans les différents formats (ogv, mp4, webm).

Partagez le code source de votre player vidéo

Utilisez la zone commentaires, pour partager le code source HTML5 de votre player vidéo !

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>