CATALOGUE Code & Data Formation Animate CC Maîtrisez la programmation dans Animate CC - Ateliers créatif avec Create JS

Mise en place et manipulation des éléments vidéo dans le DOM

Retour à la formation
Chapitre 7 Leçon 5
Précédent
Suivant

Apprenez à créer et ajouter une balise vidéo dans le DOM. Cette vidéo couvre la création, la stylisation, et l'intégration de la vidéo avec JavaScript.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous verrons comment créer et ajouter une balise vidéo HTML dans le DOM de notre page web. Nous commencerons par la création de la balise en utilisant document.createElement, puis nous lui attribuerons des propriétés comme src pour définir le chemin de la vidéo et id pour un accès facile.

Ensuite, nous aborderons la manière de styliser la vidéo avec des propriétés CSS pour la positionner de manière absolue et ajuster ses dimensions à celles du stage. Nous ajouterons également une couleur de fond noire pour les bandes latérales qui apparaîtront inévitablement si la vidéo est moins large que le stage.

Enfin, nous encapsulerons toutes ces opérations dans une fonction JavaScript pour faciliter l'appel ultérieur de cette séquence de commandes lors du chargement de la vidéo via un bouton spécifique.

Objectifs de cette leçon

L'objectif de cette vidéo est de vous enseigner comment créer, styler et intégrer une balise vidéo HTML à l'intérieur du DOM de votre page web en utilisant JavaScript.

Prérequis pour cette leçon

Vous devez avoir des connaissances de base en HTML, CSS et JavaScript pour suivre cette vidéo.

Métiers concernés

Les compétences acquises dans cette vidéo sont particulièrement utiles pour des métiers tels que développeur front-end, intégrateur web et responsable multimédia.

Alternatives et ressources

Comme alternatives, vous pourriez utiliser des frameworks JavaScript comme React ou Vue.js pour gérer plus facilement les intégrations vidéo dans des projets plus complexes.

Questions & Réponses

L'encapsulation dans une fonction permet de réutiliser le code facilement et de l'appeler lors d'événements spécifiques, comme le clic sur un bouton de chargement de la vidéo.
Les styles CSS appliqués à la balise vidéo incluent une position absolue, une largeur et une hauteur égales au stage canva, et un fond noir pour les bandes latérales.
Les propriétés ajoutées incluent 'src' pour le chemin de la vidéo et 'id' pour un accès DOM plus facile.