Créer dynamiquement un élément vidéo HTML5 sans qu'il apparaisse sur la page
Est-il possible de créer dynamiquement un élément de vidéo HTML5 afin que je puisse accéder à l'élément par l'API est comme document.getElementById
ou Nom, mais il peut ne pas s'afficher dans la page web.
Quelque chose comme div.hide()
ou quelque chose dans ce sens ?
source d'informationauteur Swaraj Chhatre
Vous devez vous connecter pour publier un commentaire.
Vous pouvez essayer
vous pouvez également utiliser le
canPlayType
méthode pour vérifier si le navigateur prend en charge le format vidéo que vous souhaitez utiliser avant le réglage de la source deLa méthode renvoie
maybe
ouperhaps
selon le navigateur. Si une chaîne vide, cela signifie qu'il ne peut pas le lire.Vous pouvez maintenant utiliser le
video
l'aide de l'API. Juste de le stocker à l'échelle mondiale. Plus tard, vous pourrez l'insérer dans le DOM. Espérons que cette aide.Bien sûr, vous pouvez créer tout simplement à l'aide de JS. Vous avez besoin de rien pour être pré-créé dans le corps html.
Ici est simple façon de créer de la vidéo de l'élément en JS:
Avant de faire cela, vous devriez vérifier si le navigateur prend en charge la vidéo de l'élément, et si oui, quels formats de fichiers peuvent être lus. Ce que vous pouvez faire par:
Ensuite, si l'élément vidéo est pris en charge, test de formats vidéo peuvent être lus:
Après cela, vous pouvez ajouter un élément vidéo à votre page en utilisant JS seulement, avec des sources vidéo ensemble. Il y a peut être un problème .htaccess sur le serveur où vous devez ajouter les lignes:
Cela peut ne pas être nécessaire, selon la façon dont votre serveur est installé, mais si vous rencontrez un problème avec la lecture de vidéos à partir de votre serveur, mais ils jouent bien à partir, par exemple. localhost sur votre machine de dev, cela peut résoudre le problème. .htaccess avec les lignes ci-dessus doit être placé dans le dossier où les fichiers vidéo sont situées sur le côté serveur.
Ok maintenant, afin d'avoir cet élément disponible avec getElementById(...), il vous suffit de définir l'id de l', lors de sa création:
Et maintenant, vous pouvez trouver plus tard à l'aide de:
Cependant, comme quelqu'un a dit déjà, vous n'avez pas besoin de faire cela si vous avez déjà créé l'élément et variable pointant vers lui... il suffit d'utiliser directement.
Espère que cela aide 🙂
Mis à jour (et plus simple) de la façon d'atteindre cet objectif (depuis les recherches Google sont à la pointe ici):