Adding cloudinary playList widget in React

Question

I have React app running videos from cloudinary. I have managed to edit Video tag but want to also add playlistWidget. Where does this fit into code/Video tag? The example provided on cloudinary is for javascript not React.

https://cloudinary.com/documentation/video_player_customization

Here is ex of my component with cloudinary player.

import React from "react";
import axios from "axios";
import "./VideoPlayer.css"
import { inDev } from "../API";
const devAPI = "http://localhost:8081/api/";
const baseAPI = "api/";
import {Image, Video, Transformation, CloudinaryContext} from 'cloudinary-react'; 



class Player extends React.Component { 

    constructor(props) {
        super(props);
        this.state = {
          WelcomeVideo:"https://res.cloudinary.com/Name/video/upload/v1594509086/ab7qqxjexpwfv4j7kzj2x.mp4",
          Logo:"https://res.cloudinary.com/example/image/upload/v1599423081/Logo1.png",
           
        };

     
    
      }
    
    render() {

return ( <div style={{textAlign: "center"}}> 
<h1 style={{fontSize:"60px"}}>Video of Week!</h1>



<Video
id="example-player"
cloudName="demo" 
src={this.state.WelcomeVideo} 
publicId="cat" 
controls 
autoPlay="true"
preload= "auto"
class="cld-video-player"
poster={this.state.Logo}
width= "400"
height="320"
fallback="Cannot display video" 
/> 


                     
                  

</div> 
    );
}
}


export default Player;

Updated recommendations per cloudinary https://cloudinary.com/documentation/video_player_playlists_recommendations#:~:text=playlist%20widget%20%2D%20A%20scrollable%20list,a%20full%20screen%20web%20browser.

import React, { Component } from "react";
import { Cloudinary } from "cloudinary-core";
import "cloudinary-video-player/dist/cld-video-player";

class PlayerCloud extends Component {


  componentDidMount() {
// Setting video sources:
var source1 = { publicId: 'elephants', info: { title: 'My main movie', 
   subtitle: 'Something to know about the main movie' } }
var source2 = { publicId: 'cat', info: { title: 'Another great video', 
   subtitle: 'A great subtitle', 
   description: 'An interesting description of this video....' } }
var source3 = { publicId: 'dog', info: { title: 'Another interesting video1', 
   subtitle: 'Subtitle for video3', description: 'An interesting description of this video....' } }
 
   // Specifying the recommendations for source1 as a fixed array of sources:
source1.recommendations = [source2, source3]

    const cld = new Cloudinary({ cloud_name: "demo", secure: true });
    const videoName = "elephants";
   var demoplayer = cld.videoPlayer("some-video", {
      publicId: source1.publicId,
      controls: true,
      preload: "auto",
      muted: true,
      autoplay: true,
      width: 300,
      autoShowRecommendations:true 
    });
   
  }
  render() {
    return (
      <div>
        <video
        id="some-video"
        />
      </div>
    );
  }
}
export default PlayerCloud;

Answer 1

See this Codesandbox showing how to bind the video player code to a video tag. Once you are running a video player instead of an HTML 5 video tag, you can add functionality like the playList Widget

https://codesandbox.io/s/em2g0

https://cloudinary.com/documentation/video_player_playlists_recommendations#creating_a_playlist

The video player requires CSS that is in the index.html as well as binding functionality to a video tag.