如何控制cloudinary-react视频组件中的video-element

Question

我想在 cloudinary-react Video 组件上调用 .play() 方法。 我尝试将引用添加到视频组件上，但是当我在引用上调用播放时，它不会转发到视频标签。

<Video ref={this.videoPlayer} />

如果我在组件上放置 onClick，它将转发到视频标签并开始播放：

<Video onClick={(e) => e.target.play()} />

视频组件上没有用于播放或暂停的接口，或者只有没有文档。

Answer 1

要向视频添加控件，可以向 Cloudinary Video 组件添加转换。转变将是：

<Transformation controls="true" />

视频标签如下所示：

<Video publicId="myPublicId" fallbackContent="Your browser does not support HTML5 video tags.">
  <Transformation controls="true"/>
</Video>

您还可以在 Cloudinary 文档中参考此内容： https://cloudinary.com/documentation/react_video_manipulation#example_3

Answer 2

使用“innerRef”而不是“ref”将参考传递给视频。

const videoRef = useRef();
    
function PauseVideo()
{
    videoRef.current.pause();
}
   
return(
    <AdvancedVideo
                  cldVid={YOUR_VIDEO}
                  innerRef={videoRef}
                  controls
     />
);