Cloudinary 视频集成反应找不到元素 ID

Question

I recently started integrating cloudinary player into React Web App. Now I am integrating this into existing player on other part of site and am running into "Uncaught Error: Could not find element with id some-video".

componentDidMount() {
 //set video sources
 var source1 = { publicId: 'dog',  info: { title: 'My main movie', 
  subtitle: 'Something to know about the main movie' } }

//Create Cloudinary instance
 var cld = new Cloudinary({ cloud_name: "demo", secure: true });

//give video player cloudinary powers
var demoplayer = cld.videoPlayer("some-video", {
 publicId: {source1},
 width: 400,
height: 400,
 sourceTypes: ["mp4"],
});

}
 render() {
   var { video, user } = this.props;
   var loadedVideo = <></>;
   return (
     <Aux>
       <Grid container justify="center">
         {this.state.fetchDuration ? (
           <CircularProgress color="primary" />
         ) : (
           <Grid item xs={12} md={10}>
             <Paper style={useStyles.paper}>
               <Grid container justify="center">
                 <Grid item xs={12} md={8}>
                   {
                     <LazyLoad>
                       
                       <video
                         ref="videoRef"
                         id= "some-video"
                         onTimeUpdate={this.timestart}
                         onLoadedData={(e) => this.refs.videoRef.play()}
                         controls
                         autoplay
                         style={{ width: "100%", height: "auto" }}z
                       >
                         <source src={video.videoUrl} type="video/mp4" />
                       </video>
                     </LazyLoad>
</Aux>

Answer 1

Can you elaborate on why do you use some-video ? Instantiate the video player is bypassing the ID of the video tag ID you defined or the constructor parameters .

Here is a code sample in React: https://codesandbox.io/s/video-player-forked-j3bgp And here are the steps to create it: https://cloudinary.com/documentation/video_player_how_to_embed#self_hosted_player

Answer 2

There are couple of problem.

1. First, I see you are using a component named 'LazyLoader'. The 'video' element is a child of this component so you need to make sure the video element do not be loaded after the 'componentDidMount' does.

2. You should destory the player instance after the component get destroyed. The Cloudinary Video-player is using Video.js : https://docs.videojs.com/tutorial-react.html

 componentDidMount() { this.player = cld.videoPlayer("some-video") } componentWillUnmount() { if (this.player) { this.player.dispose() } }

3. the Cloudinery Core instance should be creadted once, you should move

var cld = new Cloudinary({ cloud_name: "demo", secure: true });

to you main App and pass it as a prop (or from a store) to the children components.

4. 'cld.videoPlayer' can also can get an element and not only an id , so you can pass it 'videoRef'