在 React 中添加 cloudinary playList 小部件答案

【问题标题】：Adding cloudinary playList widget in React在 React 中添加 cloudinary playList 小部件
【发布时间】：2020-09-08 04:00:18
【问题描述】：

我有 React 应用运行来自 cloudinary 的视频。我设法编辑了视频标签，但还想添加 playlistWidget。这在哪里适合代码/视频标签？ cloudinary 上提供的示例是针对 javascript 而不是 React。

https://cloudinary.com/documentation/video_player_customization

这是我使用 cloudinary 播放器的组件。

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;

每个 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;

【问题讨论】：

标签： reactjs cloudinary

【解决方案1】：

查看此代码框，了解如何将视频播放器代码绑定到视频标签。运行视频播放器而不是 HTML 5 视频标签后，您可以添加类似 playList Widget 的功能

https://codesandbox.io/s/em2g0

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

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

【讨论】：

你能用基于类的组件发布这个吗？我不熟悉钩子并使用钩子改变状态？
试试这个codesandbox.io/s/react-with-video-r4zzm?file=/src/App.js
非常感谢你太棒了。
你也可以这样编码：class VideoPlayerTest extends React.Component { videoName = "elephants"; cld = () => { return new Cloudinary({ cloud_name: "demo", secure: true }); }; videoPlayerInit = () => { const cld = this.cld(); cld.videoPlayer("some-video", { publicId: this.videoName, controls: true, preload: "auto", muted: true, autoplay: true, width: 300 }); } componentDidMount() { this.videoPlayerInit(); } render() { return <video id="some-video" />; } }.
我使用第一个类方法更改对其进行了更新，但现在得到以下“无法对未安装的组件执行 React 状态更新。这是一个无操作，但它表明内存泄漏您的应用程序。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。我将使用新代码更新帖子。

【解决方案2】：

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

您可以在此处找到有关视频播放器选项和样式的更多信息：https://cloudinary.com/documentation/cloudinary_video_player

【讨论】：