0
302
ViewsBotón de superposición personalizado y título en video de youtube incrustado en reaccionar
Debe tener un botón de reproducción personalizado como el que se muestra a continuación, y también debe agregar el título del video en cualquier posición sobre el video. Actualmente intento react-player . Cualquier ayuda será apreciada
import ReactPlayer from 'react-player'
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
¿Cómo pasar el botón de reproducción personalizado como la imagen de arriba?
Cada vez que paso el enlace de YouTube, aparece la superposición predeterminada de YouTube, necesito personalizarla.
2 answers
Answer question0
YouTube no permite personalizar el botón de reproducción. Lograr esto:
- Obtenga y coloque el video de YouTube usando su código existente
- Ocultar el video de YouTube
- Cree un
divque se posicione en el mismo lugar que el video de YouTube - Use una imagen personalizada u obtenga la imagen en miniatura del video de YouTube y utilícela como
background-imagede un div - Coloque su botón de reproducción personalizado y texto personalizado en el div
- Cuando se hace clic en el botón, oculta tu div, muestra el video de YouTube con la reproducción automática habilitada
0
De la documentación de react-player para el "modo de jugador ligero" :
El accesorio
lightmostrará una miniatura de video con un ícono de reproducción simple y solo cargará el reproductor completo una vez que el usuario haya interactuado con la imagen. Noembed se usa para obtener miniaturas de una URL de video. Tenga en cuenta que no se admite la obtención automática de miniaturas para Facebook, Wistia, Mixcloud y URL de archivos, y no se garantiza la compatibilidad continua con otras URL.Si desea pasar su propia miniatura para usarla, establezca
lighten la URL de la imagen en lugar de true.Los estilos para la imagen de vista previa y el ícono de reproducción se pueden anular al apuntar a las clases de CSS
react-player__preview,react-player__shadowyreact-player__play-icon.
(énfasis añadido)
SO: parece que para proporcionar una imagen de vista previa personalizada, reescribiría su JSX como:
<ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" light="path/to/your/preview/image" />Así que puedes lograr esto con una imagen de vista previa personalizada. Si necesita algo más dinámico, en el que el botón tenga sus propios estados de desplazamiento, es posible que deba girar algo desde cero o buscar una biblioteca diferente.