Aller au contenu

Comment utiliser les objets vidéo et audio avec JavaScript

Découvrez comment créer et utiliser les objets video et audio à la volée avec JavaScript.

Cela vous permet de rajouter très simplement un player audio ou vidéo dans votre page web sur une simple interaction de l’utilisateur.

Tout est dans la vidéo ci-dessous.

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

Comment utiliser les objets vidéo et audio avec JavaScript

Bonjour à tous et bienvenu sur Développement Facile.

Ici Mathieu expert en développement applicatif, dans cette nouvelle vidéo vous allez apprendre à créer des objets vidéo et audio à la volée avec JavaScript, l’utilisateur il surfe sur votre application il utilise votre jeu que ce soit sur une tablette, un Smartphone ou un ordinateur de bureau, et il y a une commande Ajax via une interaction, il appuie sur un bouton ou quelque chose, vous allez créer un objet vidéo et audio donc à la volée ça va rajouter un Player vidéo, un Player audio sur la page Web de l’utilisateur pour lire une vidéo ou un fichier MP3 avec les paramètres que vous lui avez fournis, donc c’est assez puissant plutôt que d’avoir le lecteur déjà prêt ou de le masquer et tout non, vous allez créer l’objet à la volée en lui donnant les différents paramètres.

Canvas avec JavaScript

Comme je vous l’ai dit pour afficher une vidéo soit vous utilisez la balise HTML 5 vidéo ou alors vous allez créer un objet vidéo, donc ça dépend évidemment des besoins de votre application mais la création d’un objet vidéo c’est très puissant, parce que pendant que l’utilisateur utilise votre application ou votre jeu, il n’y a pas besoin de l’objet vidéo donc ça consommera beaucoup moins de ressources et si il a besoin  il appui sur Play, sur bouton, ça lance une vidéo et bien là vous créez l’objet vidéo à la demande de l’utilisateur en direct, c’est exactement la même chose pour un fichier audio vous pouvez également le créer à la demande, dès que l’utilisateur appui sur tel ou tel bouton, dès qu’il fait telle ou telle action, vous créez le lecteur audio à la demande, sinon vous utilisez la balise HTML 5 audio ça dépend encore de votre application ou de votre jeu.

Voir les exemples JavaScript

Je vous montre tout ça à travers plusieurs exemples de code source, que ce soit pour créer un objet vidéo à la volée, donc lire une vidéo qui soit compatible avec tous les navigateurs sur Smartphone, sur tablette que ce soit IPhone ou Android, pareil pour un MP3 lecteur audio compatible IPhone, Android que ce soit sur les tablettes, les Smartphones, les ordinateurs de bureau quelques soient le navigateur donc on voit tout ça ensemble à travers un exemple de code source.

Alors comme d’habitude vous intégrez votre fichier CSS, je pense que vous commencez à le connaître par cœur maintenant, vous avez également votre fichier JavaScript, deux boutons ici alors sur le bouton ça va appeler, sur bouton vidéo ça va appeler la fonction createplayervideo, c’est-à-dire la fonction JavaScript qui va créer un lecteur vidéo et sur le bouton audio ça va appeler la fonction JavaScript qui va créer le lecteur audio à la volée, c’est-à-dire sur votre page Web au départ vous avez seulement deux boutons, sans lecteur audio, sans lecteur vidéo, tout simplement et donc qu’est-ce que fait le JavaScript, lorsque l’on appelle createPlayerVideo on va créer un élément vidéo dans le DOM donc une balise vidéo, on test est ce que, suivant le navigateur qui est utilisé par votre utilisateur, est ce qu’il peut lire les vidéos MP4 ou au format ogg et en fonction on va lui donner une vidéo à lire dans la balise vidéo on renseigne une vidéo soit il peut lire, le navigateur, les vidéos MP4 donc on lui transmet une vidéo au format MP4 sinon une vidéo format ogg, on met des attributs à l’objet vidéo donc la largeur, la hauteur on affiche les contrôles on peut également les masquer et on ajoute dans la balise body là, le nouvel objet vidéo donc qu’est-ce qu’il se passe ? Je clique, à la balise body donc à la fin, on a ajouté l’objet vidéo et il est bien évidemment possible de le lire, l’objet vidéo en supprimant le son, en le mettant en plein écran donc je vais autoriser mode plein écran, en faisant une pause dessus, en revenant au départ etc. Par contre je peux enlever les contrôles également, tout simplement donc je recharge la page, j’appel et là il n’y a plus de contrôle, forcément si il n’y a pas contrôle de contrôle, on ne peut pas faire grand-chose avec la vidéo donc je vais remettre les contrôles et là en fait, je peux créer plusieurs objets vidéo, ils vont s’enchaîner les uns au-dessus des autres parce que si vous regardez lorsque je clique sur le bouton ça créé un objet vidéo à chaque fois, createElement, createBaliseVideo et je lui renseigne les paramètres pour la balise audio c’est exactement le même fonctionnement sauf qu’au lieu de créer une balise vidéo, je vais créer une balise audio simplement, est-ce que, en fonction du navigateur est-ce qu’il peut lire les fichiers MP3, les fichiers ACC ou les fichier ogg vorbis et en fonction du navigateur, je lui donne le bon fichier audio à lire, pareil je rajoute les contrôles et qu’est-ce qui se passe ? Ici ça rajoute un lecteur audio avec les contrôles de votre lecteur audio, vous pouvez également en rajouter autant que vous voulez,  plusieurs, rajouter une vidéo, faire une lecture pause dessus, lire l’audio en même temps, vous avez toutes les possibilités en fait, ce cas-là c’est ça c’est très pratique de créer les balises vidéo ou audio à la volée, c’est lorsque vous voulez, vous êtes sur un Smartphone ou une tablette et il faut économiser les ressources mémoire utilisées par votre application Web, par votre site Internet, dès que l’utilisateur en a besoin, que ce soit sur un élément du menu en fonction de mouvement de la souris des gestes qu’il fait avec son téléphone, son orientation si il fait du toucher rectactile sur son téléphone, vous pouvez créer la balise audio donc la lire la vidéo dès que l’utilisateur le demande expressément donc c’est très pratique, c’est très simple à mettre en œuvre, il suffit de créer une balise et de renseigner ces éléments  chaque fois.

Votre plan d’actions !

Maintenant c’est à vous de jouer vous savez créé des objets vidéo et audio à la volée compatibles avec tous les navigateurs que ce soit sur Smartphone, sur tablette, sur ordinateur de bureau, comme d’habitude c’est à vous de jouer vous retrouvez le code source en téléchargement sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo, l’équipe développement facile vous répondra, maintenant je vous invite à cliquer ici, lancez la vidéo deux, sur le lien, sur l’image, lancez la deuxième vidéo, dans la deuxième vidéo vous allez aller beaucoup plus loin que ce soit avec les Player audio, les Player vidéo, vous allez tout savoir des paramètres, comment gérer le buffer, la taille, charger une playlist vidéo, donc tout ça, c’est expliqué dans la deuxième vidéo, je vous donne également des stratégies avancées pour développer des applications très performantes deux à trois fois plus rapidement que les autres, à travailler en équipe, des applications compatibles en même temps simultanément en Smartphone, tablette, iPhone, Android, les ordinateurs de bureau, qui s’affichent correctement sur tous les navigateurs, vous allez apprendre des stratégies des experts en développement tout ça dans la deuxième vidéo, cliquez simplement sur l’image, le lien lancer la deuxième vidéo je vous explique en détail donc vous dis à tout de suite.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple de la vidéo

Retrouver le code source complet avec les fichiers audio et vidéo de l’exemple d’implémentation vu dans la vidéo

Téléchargement du code source JavaScript Player Audio Vidéo

Cliquez ici pour télécharger le code source JavaScript Player Audio Vidéo

Posez vos questions sur les objets audio et vidéo

Utilisez la zone commentaire si vous avez besoin d’information complémentaire sur les objets JavaScript audio et 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 Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>