在 React 中添加 cloudinary playList 小部件

Question

我有来自 cloudinary 的 React 应用运行视频。我已经设法编辑了视频标签，但还想添加播放列表小部件。这适合 code/Video 标签的什么位置？ 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;

每个云的更新建议 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，了解如何将视频播放器代码绑定到视频标签。一旦您成为运行视频播放器而不是 HTML 5 视频标签，您可以添加播放列表小部件等功能

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][1]

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

在 React 中添加 cloudinary playList 小部件

Adding cloudinary playList widget in React

cloudinary

reactjs