Les balises audio et vidéo en HTML5

Bonjour à tous,

J'ai commencé (il y a 1 semaine, 1 jour) la rédaction d'un tutoriel dont l'intitulé est Les balises audio et vidéo en HTML5.

J'aimerai obtenir un maximum de retour sur celui-ci, sur le fond ainsi que sur la forme, afin de proposer en validation un texte de qualité.

Si vous êtes intéressé, cliquez ci-dessous

Merci d'avance pour votre aide

Super sujet de tuto. J'y jette un oeil asap !

Salut,

J'ai survolé, ça à l'air plutôt sympa.

Chez moi il s'affichent en tout cas …

Et j'ai aussi une question : il y a un tutoriel HTML5/CSS3 qui se prépare il me semble, es-ce que cette partie y sera intégrée au final ou tu penses la laisser indépendante ?

J'ai pas repéré de fautes sur les dix lignes que j'ai pris le temps de lire, masi moi et lorhtograffe …

Un truc que j'ai bien aimé c'est le TP avec différents niveaux, c'est vraiment pas mal … Il faudrait que je penses à faire ça dans mes futurs tutoriels.

Enfin bref, un chouette tuto !

Chez moi il s'affichent en tout cas …

Je parie que tu es sur Firefox (ou assimilé) Chez moi (Chrome) tout est force en https et du coup les fiddle s'affichent pas car ils sont pas en https mais simple http.

J'ai pas repéré de fautes sur les dix lignes que j'ai pris le temps de lire, masi moi et lorhtograffe …

Pour une fois je me suis un peu relu avant de publier, mais avec mon joli clavier qwerty on sait jamais…

Et j'ai aussi une question : il y a un tutoriel HTML5/CSS3 qui se prépare il me semble, es-ce que cette partie y sera intégrée au final ou tu penses la laisser indépendante ?

Si les auteurs du tuto veulent en parler qu'ils n’hésitent pas a me MP

En fait l’idée derrière ce tuto pour moi était

• Me remettre a l’écriture en essayant de publier un truc vite et bien ;
• de jouer avec un truc un peu moderne ;
• faire un cas d'utilisation de l'outil jsfiddle ;
• A terme proposer un atelier-concours quand le tuto sera publie, mais on en est pas la !

Un truc que j'ai bien aimé c'est le TP avec différents niveaux, c'est vraiment pas mal …

Je suis partisan du "c'est en forgeant qu'on devient forgeron"

Enfin bref, un chouette tuto !

Merci

Pour une fois je me suis un peu relu avant de publier, mais avec mon joli clavier qwerty on sait jamais…

Je passe juste pour dire qu'il y a 10 fautes rien que dans l'intro, sans compter les problèmes de typographie, donc si tu veux un coup de main de ce côté-là, faudra me mettre coauteur le temps de faire le nettoyage. Bisoux !

waho a ce point oO Je t'ai joute en co-auteur

Merci beaucoup Dominus Carnufex ! Je regarde ca très vite dans la journée !

@Tout le monde, pour le dernier extrait (TP), que préférez-vous :

• Qu'une solution soit proposée ?
• Qu'aucune solution ne soit proposée, pour vous laisser chercher ?

Sachant que la structure de base + une mise en bouche est proposée a la fin de l'extrait précédent…

Bonjour à tous !

La beta du tutoriel a été mise à jour.

Log :

• Correction de fautes (merci Dominus Carnufex)

Merci pour vos relectures

@Tout le monde, pour le dernier extrait (TP), que préférez-vous :

• Qu'une solution soit proposée ?
• Qu'aucune solution ne soit proposée, pour vous laisser chercher ?

Moi je préfère qu'une solution soit proposée, à la limite met la dans un [secret].

+1 pour la solution cachée (ou un lien vers un fiddle qui la contient).

Sinon dans cette partie je verrais bien une petite refonte du code qui est loin d'être propre (JS dans le HTML — comme au siècle dernier) ou optimisé (création de la variable lecteur à chaque appel de fonction et code valable pour une seule vidéo, pas plusieurs).

D'ailleurs en général quand des éléments nécessitent du JS pour fonctionner (comme tes boutons), la bonne pratique est de les ajouter au DOM en JS.

Pour les fichiers vidéos, c'est un CDN officiel/fiable que tu utilises ou un serveur externe ?

Sinon dans cette partie je verrais bien une petite refonte du code qui est loin d'être propre (JS dans le HTML — comme au siècle dernier) ou optimisé (création de la variable lecteur à chaque appel de fonction).

J'attendais qu'on me gronde a ce sujet Le fait est que je suis pas du tout dev. web et que donc mon apprentissage date un peu, du coup je fais des choses sales Si tu penses que c'est vraiment degeu de faire comme ca je veux bien un coup de main

Dès que j'ai bouclé mes projets clients en cours je m'occupe de ça

Sinon tu peux déjà commencer par créer les éléments du DOM (comme les boutons) en JS : tu trouveras des exemples dans le code du notificateur (dans le JS de la popup).

Pour les écouteurs, tu remplaces simplement onclick="fonction(param)" dans le HTML par elem.addEventListener('click', fonction.bind(elem, param), false); dans le JS.

Bonne idée de tuto en tout cas ! Ça peut servir aux débutants à mettre en place leur propre lecteur sans reposer sur des gros plugins basé sur jQuery ou qui chargent des tonnes de JS/CSS pour pas grand chose.

D'ailleurs ce serait pas mal d'expliquer l'intérêt des différents formats de fichiers (pourquoi plusieurs, support et caractéristiques de chacun) et comment convertir les vidéos.

Au passage, le tuto se penche surtout sur la balise <video> alors que la balise <audio> peut être très intéressante, surtout cachée et contrôlée uniquement avec du JS…

Sinon tu peux déjà commencer par créer les éléments du DOM (comme les boutons) en JS

C'est quoi l’intérêt/gain par rapport a "Ecrire les boutons en html et les binder en js" ?

Si l'utilisateur a désactivé le JS (ou que ton fichier JS n'est pas chargé, tout bêtement) il verra les boutons mais ne pourra pas les utiliser.

Alors que si tu les ajoutes dynamiquement tu peux utiliser les contrôles natifs par défaut et les remplacer par une solution custom en JS. #ProgressiveEnhancement

Ouai je vois… Mais du coup ca me fait rajouter une grosse couche d'explications "bonne pratiques JS" la ou je voulais simplement expliquer le fonctionnement de l'objet multimedia en js #SeeWhatIMean?

Mouais, y'a pas forcément besoin de faire un pavé, il suffit de présenter le HMTL de base avec le lecteur et l'attribut controls puis tu introduis le JS pour améliorer tout ça en remplaçant les contrôles par des boutons maison…

Au pire une petite phrase pour expliquer que, comme ça, ça fonctionne dans tous les cas et le tout est joué.

Ok Je vais voir ce que je peux faire

@viki : J'avais pas vu ton edit

Au passage, le tuto se penche surtout sur la balise <video> alors que la balise <audio> peut être très intéressante, surtout cachée et contrôlée uniquement avec du JS…

Tu as une idée derrière la tête ? Car oui je me concentre beaucoup sur la balise video car en quelque sort elle "inclut" audio

L'exemple que j'ai en tête c'est de jouer des sons pendant un jeu (oui, j'ai mon tuto en tête ).

Sinon un truc tout bête serait de faire une boîte à sons : un tas de boutons qui jouent chacun un son (chargés et gérés en JS).

Même si <video> inclut plus ou moins <audio>, ne général une vidéo est affichée, alors que les sons peuvent souvent être gérés dynamiquement, sans interface.

Ouai je vois Je suis en train de relire un peu le tuto, je vais voir comment l’agrémenter… Tu as un site de son (je vois bien la réalisation d'un petit piano pour jouer avec la balise audio…)