Reactjs 在React中添加cloudinary播放列表小部件

我有React应用程序运行cloudinary的视频。我已设法编辑视频标签，但也想添加播放列表小部件。这在代码/视频标签中的位置？cloudinary上提供的示例是针对javascript not React的

这是我的cloudinary player组件的ex

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;

从“React”导入React；
从“axios”导入axios；
导入“/VideoPlayer.css”
从“./API”导入{inDev}；
恒德瓦皮=”http://localhost:8081/api/";
const baseAPI=“api/”；
从“cloudinary react”导入{图像、视频、转换、CloudinaryContext}；
类播放器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
欢迎收看：https://res.cloudinary.com/Name/video/upload/v1594509086/ab7qqxjexpwfv4j7kzj2x.mp4",
标志：“https://res.cloudinary.com/example/image/upload/v1599423081/Logo1.png",
};
}
render（）{
报税表（
本周视频！
);
}
}
导出默认播放器；

根据cloudinary更新建议

import React，{Component}来自“React”；
从“Cloudinary核心”导入{Cloudinary}；
导入“cloudinary视频播放器/dist/cld视频播放器”；
类PlayerCloud扩展组件{
componentDidMount（）{
//设置视频源：
var source1={publicId:'大象'，信息：{title:'我的主要电影'，
副标题：“关于主要电影的一些知识”}
var source2={publicId:'cat'，info:{title:'另一个伟大的视频'，
字幕：“一个很棒的字幕”，
描述：'这段视频的有趣描述…'}
var source3={publicId:'dog'，info:{title:'other interest video1'，
副标题：“视频3的副标题”，描述：“这段视频的有趣描述……”
//将source1的建议指定为源的固定数组：
source1.Recommensions=[source2，source3]
const cld=newcloudinary（{cloud_name:“demo”，secure:true}）；
const videoName=“大象”；
var demoplayer=cld.videoPlayer（“一些视频”{
publicId:source1.publicId，
控制：对，
预加载：“自动”，
沉默的：是的，
自动播放：对，
宽度：300，
自动显示建议：正确
});
}
render（）{
返回(
);
}
}
导出默认PlayerCloud；

查看此代码沙盒，其中显示了如何将视频播放器代码绑定到视频标签。运行视频播放器而不是HTML 5视频标记后，可以添加播放列表小部件等功能

---

视频播放器需要index.html中的CSS以及视频标签的绑定功能。

这里是另一个react沙盒，它只在视频播放器中显示一个短视频。[https://codesandbox.io/s/react-cld-video-player-v2-yfgxi?file=/src/VideoPlayerTest.js][1]

---

您可以在此处找到有关视频播放器选项和样式的更多信息：

您能用基于类的组件发布此内容吗？我不熟悉钩子和用钩子改变状态？试试这个谢谢你，你太棒了。你也可以这样编码：

class VideoPlayerTest extensed React.Component{videoName=“大象”；cld=（）=>{return new Cloudinary（{cloud_name:“demo”，secure:true}）}；videoPlayerInit=（）>{const cld=this.cld（）；cld.videoPlayer（“一些视频”，{publicId:this.videoName，控件：true，预加载：“自动”，静音：true，自动播放：true，宽度：300}）；}componentDidMount（）{this.videoPlayerInit（）；}render（）{return；}我使用第一类方法更改对其进行了更新，但现在得到了以下信息：“无法对已卸载的组件执行反应状态更新。这是一个不操作，但它表明应用程序中存在内存泄漏。若要修复，请取消componentWillUnmount方法中的所有订阅和异步任务。”我将使用新代码更新帖子。
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;