Creé un componente React funcional para renderizar un reproductor de videojs que funciona muy bien, pero ahora estoy tratando de agregar un complemento (en este caso, estoy intentando con videojs-preview: https://www.npmjs.com/package /videojs-preview ) y falla. Aquí está mi componente:
import React, { useCallback, useEffect, useState } from 'react'; import videojs from 'video.js'; import preview from 'videojs-preview'; const Player = (props) => { const [videoEl, setVideoEl] = useState(null); const onVideo = useCallback((el) => { setVideoEl(el); }, []); useEffect(() => { if (videoEl == null) return; videojs.registerPlugin('videojs-preview', preview); videojs(videoEl, { ...props }, () => { videojs.preview(); }); }, [props, videoEl]); return ( <div data-vjs-player> <video ref={onVideo} className="video-js vjs-big-play-centered mt-10" playsInline crossOrigin="anonymous" height={630} autoPlay /> </div> ); }; export default Player;El error que recibo es: TypeError: video_js__WEBPACK_IMPORTED_MODULE_2___default(...). La vista previa no es una función
El complemento se registra solo, por lo que no se necesita videojs.registerPlugin() .
Solo importa como import 'videojs-preview'; , e inicie el complemento en la instancia del reproductor en lugar de videojs .
const player = (playerRef.current = videojs(videoElement, options, () => { player.preview(); }));Un ejemplo con un complemento diferente pero con el mismo principio está en https://codesandbox.io/s/video-js-seek-buttons-react-vl7ux