Salut, dans cette conférence, nous allons parler du multimédia. Cela inclut la vidéo et l'audio dans votre site Web. Maintenant, la vidéo et l'audio sont deux des éléments les plus populaires et les deux plus détestés du web. Les concepteurs l'adorent parce qu'ils peuvent mettre leurs vidéos cool et peut-être de la musique maison en ligne et partager avec tout le monde. Les utilisateurs qui accèdent à votre site détestent parfois parce qu'ils ont l'impression qu'ils n'ont aucun contrôle sur ce qu'ils voient. Donc, ce dont nous allons parler aujourd'hui, ce sont les éléments audio et vidéo HTML5. Nous allons expliquer brièvement le but des plugins. Enfin, nous allons réfléchir aux questions d'accessibilité qui viennent de pair avec l'utilisation de ces types de balises multimédias. Donc, avant HTML5, il n'y avait pas vraiment d'utilisations cohérentes du multimédia qui étaient détenus sur tous les navigateurs. Donc, le nouveau HTML5 est conçu pour éviter l'utilisation d'avoir à utiliser des plugins ou des logiciels supplémentaires que vous n'avez pas déjà sur votre machine. Ça devrait vraiment être plug and play. Si vous voulez mettre une vidéo, les gens devraient juste pouvoir la voir sans avoir à télécharger Quicktime ou Flash, ou quoi que ce soit le long de cette ligne. Maintenant, ce n'est pas encore une balise entièrement implémentée. Mais ça va très vite dans cette direction. Commençons donc par l'élément vidéo. Ainsi, la balise vidéo utilise un attribut source qui est très similaire à l'attribut image. Vous indiquez au navigateur où se trouve le fichier. Vous pouvez également utiliser ce que nous appelons des balises embarquées, où vous pouvez avoir la balise vidéo, puis plusieurs sources ci-dessous. Il y a un certain nombre d'attributs qui sont utilisés très largement. Les deux premiers, la hauteur et la largeur, sont assez explicatives. Quelle est la taille souhaitez-vous que votre vidéo apparaisse dans le navigateur ? La lecture automatique indique si la vidéo doit démarrer ou non dès que vous chargez la page. La boucle permettra à la vidéo de jouer encore et encore. Et le dernier, les contrôles, est quelque chose que vous pouvez ajouter pour donner à la personne plus de contrôle sur le moment d'arrêter et de démarrer la vidéo. Si vous utilisez une balise vidéo, c'est généralement une bonne idée d' y mettre du texte avec les différents attributs. De cette façon, si le navigateur pour une raison quelconque ne supporte pas la balise ou ne peut pas lire la vidéo, vous obtenez une sorte de conseil utile à l'utilisateur en leur faisant savoir qu' il devrait y avoir une vidéo ici que vous regarderiez. L' élément audio est très similaire à la vidéo, puis encore une fois nous utilisons un attribut source pour lier au fichier. En règle générale, vous allez utiliser un fichier .mp3 ou .wav. Les attributs encore une fois, très similaires. Vous avez la lecture automatique, les contrôles et la boucle, mais nous avons également mis en mémoire tampon, en sourdine et en volume. Et ce sont les attributs supplémentaires que vous pouvez mettre dans l'endroit où vous allez contrôler ce que la personne écoute et à quel point elle est forte. De plus, lorsque vous utilisez l'audio, vous pouvez définir des clips où vous pouvez entrer et dire, je veux que la vidéo commence à ce moment précis. Donc mon premier exemple, je veux qu'il ne joue que la musique de 5 à 25 secondes. La suivante, vous commencez par le début et vous ne jouerez que les 39 premières secondes. Encore une fois, vous pouvez continuer et encore. Je veux commencer à une minute 38 secondes, et juste aller de l'avant et jouer à 45. Ou à la fin, vous pouvez juste dire, hey, commencer à la 42 seconde et jouer à partir de là. Donc, vous montrer le code pour la vidéo et l' audio HTML est à peu près l'antithèse de ce qu'il s'agit. C' est censé être pour regarder des choses et entendre des choses. Alors allons de l'avant et regardons un code maintenant qui fonctionne réellement. Vous pouvez voir que j'ai le src comme juste mon film BoxCar, et j'ai défini la largeur par défaut à 40. Donc, je vais aller ici à Sublime et ouvrir ça dans le navigateur. C' est là, et ce n'est pas très excitant. À moins que vous ayez des yeux super rapides et que votre navigateur est incroyablement rapide, vous avez complètement manqué le fait qu'il a chargé cette vidéo et joué tout le long. Alors allons-y et essayons à nouveau. En fait, il l'a juste chargé et n'a rien fait. Ajoutons la lecture automatique. D' accord, sauve-le. Je vais aller ici et recharger, et maintenant vous pouvez voir en ajoutant l'attribut de lecture automatique, il affichera automatiquement la vidéo. Maintenant, c'est quelque chose que vous ne voulez pas faire sauf si vous êtes très certain que le spectateur veut le voir. Il y a eu un gros tumulte récemment quand un site de médias sociaux a commencé à faire toutes les vidéos autoplay. Donc si tu continuais, tout à coup toutes ces vidéos étaient en train de jouer. Et ça dévorait une énorme quantité de bande passante pour les gens, d'accord ? Donc, au lieu de simplement faire la lecture automatique, allons de l'avant et mettons des contrôles. En faisant cela, vous pouvez voir que nous avons maintenant ajouté un petit panneau de contrôle au bas de la vidéo. Les utilisateurs peuvent maintenant démarrer la vidéo, arrêter la vidéo et la rembobiner. C' est vraiment la façon dont vous voulez penser à la façon dont vous pouvez améliorer l'expérience pour l'utilisateur. Il est possible de mettre plusieurs attributs dans cela et de les mettre en quelque sorte les uns sur les autres. Si nous le faisons maintenant, vous aurez l'occasion de vivre mon enfant de cinq ans voler plusieurs fois sur la route. Encore une fois, vous voudriez vraiment éviter d'utiliser la boucle et aussi éviter d'utiliser la lecture automatique, sauf si vous donnez aux gens la possibilité d'utiliser les contrôles aussi, d'accord ? Une dernière chose dont je veux parler ici est que vous remarquerez peut-être avec les contrôles et la boucle, ce sont des attributs qui ne semblent prendre aucune valeur. Donc src =, largeur =. Lorsque vous mettez ces attributs booléens, c'est la même chose que de dire que les contrôles sont égaux à true. La boucle est égale à true. C' est comme ça que nous avons vécu avec notre vidéo. Allons de l'avant et regardons l'audio une seconde. Rendez ça un peu plus grand ici. Ce que j'ai ici, c'est que j'ai juste un lien vers la même chanson deux fois. Dans ma première version, vous pouvez voir que je reçois la petite barre audio, parce que je me suis assuré d'utiliser des contrôles. Et si je jouais, ça va aller de l'avant et jouer à travers toute la chanson. Cependant, dans ma deuxième option, vous pouvez voir que j'ai ajouté, ici, le t= 15:35. Je l'ai préparé pour vous pour que vous puissiez vraiment entendre la chanson de quand la partie excitante entrera vraiment. Ce ne sont donc que quelques exemples simples de la façon dont vous utiliseriez les balises pour afficher votre audio vidéo. Et j'espère vraiment que pendant que vous codez, vous assurez-vous de taper les choses, et de jouer avec les choses pour vraiment avoir une idée de la façon dont ces vidéos et toutes les différentes balises HTML5 fonctionnent. Donc, l'une des choses dont je parle aux gens, qui ont codé dans d'autres versions de HTML et ne veulent pas vraiment faire le changement vers HTML5. Qu' il y a tellement de raisons que vous voulez faire ce commutateur simple rapide. Et les plugins en sont un excellent exemple. Depuis avant HTML5, il n'y avait pas de norme, les plugsins étaient nécessaires. Donc, ce que nous voulons faire est d'aller de l'avant et même si elle n'est pas supportée pour le moment, allez-y et utilisez cette balise, en comprenant que certains navigateurs mon besoin encore Flash pour les jouer. Enfin, parlons des questions d'accessibilité. Lorsque vous utilisez la vidéo ou l'audio, comme avec tout type de contenu non contextuel, vous voulez vous assurer de fournir n'importe quel type de description textuelle et de sous-titrage codé ou tout autre contenu équivalent. Vous voulez vous assurer que vous fournissez également des liens vers des plugins. Sinon, vous êtes à peu près à gauche avec une sorte de petite icône brisée vierge que les gens ne comprennent pas toujours. Et enfin, la chose la plus importante que j'aimerais que vous retiriez de ce discours, au-delà de pouvoir utiliser le code, c'est que le multimédia devrait vraiment améliorer votre contenu. Tu ne veux pas que ce soit une distraction. Vous ne voulez pas que les gens passent du temps à essayer de comprendre comment l'éteindre afin qu'ils le puissent, afin de vraiment accéder au contenu de votre page. Merci.