comment jouer/mettre en pause la vidéo de Réagir sans bibliothèque externe?
J'ai une vidéo tag () dans ma page web, et une "lecture/pause" que lorsque l'utilisateur clique sur le lien, la vidéo démarre/arrête la lecture . Comment puis-je faire afin de réagir si je ne suis pas autorisé à utiliser js pour l'appeler "getElementById", puis à utiliser le play()/pause() construire-dans les méthodes.
Une idée?
OriginalL'auteur JojoD | 2016-05-26
Vous devez vous connecter pour publier un commentaire.
La façon la plus simple serait d'utiliser
refs
qui est une Réagir fonctionnalité qui vous permettra d'invoquer des méthodes sur les instances de composant que vous êtes retourné à partir d'unrender()
.Vous pouvez en savoir un peu plus sur eux dans les docs: https://facebook.github.io/react/docs/more-about-refs.html
Dans ce cas, il suffit d'ajouter une
ref
chaîne à votrevideo
balise comme ceci:De cette façon, lorsque vous ajoutez des gestionnaires de clic de vos boutons:
La
playVideo
méthode aurez accès à votre vidéo de référence par le biais derefs
:Ici est un travail DÉMO ainsi vous pouvez voir un exemple complet.
Yep. Vous pouvez passer à la fonction de références en bas à tous les enfants de composant par l'intermédiaire d'accessoires, comme vous le feriez pour n'importe quel parent-enfant méthodes. J'ai mis à jour la démo de l'utilisation de deux éléments distincts pour la vidéo & les boutons pour illustrer.
oui, mais que faire si les deux classes (les boutons et Vidéo) sont des enfants de la mutuelle de ses parents?
Il est généralement très de bonne pratique de garder une unidirectionnel de flux de données à Réagir applications, car il rend les situations de ce type (avec la plupart des autres) facile de raisonner et de travailler avec. Donc, ma première suggestion serait de considérer le refactoring. Vous pouvez toujours techniquement le faire avec
refs
en donnant votre vidéo composant unref='videoComponent'
puis en déplaçant le play/pause pour la mutuelle des parents & invoquant ces méthodes à traversthis.refs.videoComponent.refs.vidRef.play() / .pause()
. Mais comme vous pouvez le voir, c'est commencer à être un peu fou.Je ne suis pas sûr de comprendre le cas. Est-ce elle?
<Parent><Video><video/></Video><Buttons><button></Buttons></Parent>
Ensuite, vous pouvezthis.vidRef = React.createRef()
dansParent
composant. Passer àVideo
par les accessoires. L'attacher àvideo
élémentVideo
'srender
méthode viaref
attribut. Et passerParent
'sonButtonClick
méthode pourButtons
composant via des décors, de l'attacher àbutton
pourclick
événement (viaonClick
attr). Puis dansParent
'sonButtonClick
méthode, nous pouvons fairethis.vidRef.play()
. Ai-je raté quelque chose?OriginalL'auteur Brad Colthurst
Accepté de répondre a l'aide d'une vieille réagir style, si vous voulez le faire avec ES6
Une simple composante d'auto play pause le long avec des commandes manuelles jouer Polestar intro:
Vidéo de https://www.polestar.com/cars/polestar-1
OriginalL'auteur Hitesh Sahu