Ten en cuenta que en la informática un problema casi siempre tiene más de una resoluciones, por lo tanto nosotros aquí te mostraremos lo mejor y más óptimo.
Solución:
La forma más sencilla sería utilizar refs que es una característica de React que le permitirá invocar métodos en las instancias de componentes que ha devuelto de un render().
Puede leer un poco más sobre ellos en los documentos: https://facebook.github.io/react/docs/more-about-refs.html
En este caso solo agrega un ref string para usted video etiqueta así:
De esa manera, cuando agregue controladores de clic a sus botones:
los playVideo tendrá acceso a su video de referencia a través de refs:
playVideo()
this.refs.vidRef.play();
Aquí hay una DEMO que funciona para que pueda ver un ejemplo completo.
Ejemplo actualizado para los componentes de la función React:
import React, useRef from 'react'
function myComponent(props)
const vidRef = useRef(null);
const handlePlayVideo = () =>
vidRef.current.play();
return (
)
La respuesta aceptada fue usar el estilo de reacción antiguo, si quieres hacerlo con ES6
Un componente simple para pausar la reproducción automática junto con controles manuales que reproducen la introducción de Polestar:
import React from "react";
class Video extends React.Component
componentDidMount = () =>
this.playVideo();
;
componentWillUnmount = () =>
this.pauseVideo();
;
playVideo = () =>
// You can use the play method as normal on your video ref
this.refs.vidRef.play();
;
pauseVideo = () =>
// Pause as well
this.refs.vidRef.pause();
;
render = () =>
return (
);
;
export default Video;
Vídeo de https://www.polestar.com/cars/polestar-1
Aquí puedes ver las comentarios y valoraciones de los lectores
Te invitamos a añadir valor a nuestra información dando tu veteranía en las interpretaciones.