wie play/pause video in Reagieren, ohne externe library?
Habe ich ein video-tag () in meine Webseite, und eine "play/pause" - Taste, wenn der Benutzer darauf klickt, wird das video startet/Stoppt die Wiedergabe . Wie kann ich also reagieren, wenn ich bin nicht erlaubt die Verwendung von js, um zu rufen "getElementById" und nutzen Sie dann auf Wiedergabe()/pause () - build-in Methoden.
Irgendeine Idee?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Der einfachste Weg wäre, um
refs
die ein Reagieren-Funktion, mit der Sie aufrufen von Methoden für die Komponenten-Instanzen, die Sie zurückgegeben haben, von einemrender()
.Lesen Sie ein wenig mehr auf Ihnen in den docs: https://facebook.github.io/react/docs/more-about-refs.html
In diesem Fall fügen Sie einfach einen
ref
Stringsvideo
tag folgendermaßen:So, wenn Sie hinzufügen, klicken Sie auf Handler, um Ihre Schaltflächen:
Den
playVideo
Methode haben Zugriff auf Ihre video-Referenz durchrefs
:Hier ist eine funktionierende DEMO so können Sie sich ein vollständiges Beispiel.
refs
indem Sie Ihre video-Komponenten-einref='videoComponent'
dann bewegen Sie den play/pause, um die gegenseitigen Eltern & aufrufen dieser Methoden durchthis.refs.videoComponent.refs.vidRef.play() / .pause()
. Aber wie Sie sehen können, die beginnen, ein wenig verrückt.refs
diese Weise ist ab jetzt veraltet.<Parent><Video><video/></Video><Buttons><button></Buttons></Parent>
Dann können Siethis.vidRef = React.createRef()
imParent
Komponente. Es passierenVideo
über Requisiten. Befestigen Sie es anvideo
element inVideo
'srender
Methode überref
Attribut. Und passParent
'sonButtonClick
MethodeButtons
- Komponente, über Requisiten, bringen Siebutton
fürclick
Veranstaltung (überonClick
attr). Dann inParent
'sonButtonClick
Methode, die wir tun könnenthis.vidRef.play()
. Bin ich etwas fehlt?Akzeptierte Antwort war mit alten reagieren Stil, wenn Sie wollen mit ES6
Einfachen Bauteil bis zum auto-play-pause-zusammen mit manuellen Bedienelementen spielen Polestar intro:
Videos von https://www.polestar.com/cars/polestar-1