在React中添加cloudinary playList小部件

Question

我有来自cloudinary的运行视频的React应用程序。我已经设法编辑视频标签，但也想添加playlistWidget。这在code/Video标签中的位置合适吗？cloudinary上提供的示例是针对javascript的，而不是React。

https://cloudinary.com/documentation/video_player_customization

这是我的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;

更新了每个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

请参阅此Codesandbox，展示如何将视频播放器代码绑定到视频标签。一旦您运行的是视频播放器而不是HTML5视频标记，就可以添加像playList小部件这样的功能

https://codesandbox.io/s/em2g0

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

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

Answer 2

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

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