Cloudinary视频集成react找不到元素id

Question

我最近开始将cloudinary播放器集成到React Web App中。现在我正在将其整合到网站其他部分的现有播放器中，并运行"；未捕获错误：找不到id为some video的元素；。

componentDidMount() {
//set video sources
var source1 = { publicId: 'dog',  info: { title: 'My main movie', 
subtitle: 'Something to know about the main movie' } }
//Create Cloudinary instance
var cld = new Cloudinary({ cloud_name: "demo", secure: true });
//give video player cloudinary powers
var demoplayer = cld.videoPlayer("some-video", {
publicId: {source1},
width: 400,
height: 400,
sourceTypes: ["mp4"],
});
}
render() {
var { video, user } = this.props;
var loadedVideo = <></>;
return (
<Aux>
<Grid container justify="center">
{this.state.fetchDuration ? (
<CircularProgress color="primary" />
) : (
<Grid item xs={12} md={10}>
<Paper style={useStyles.paper}>
<Grid container justify="center">
<Grid item xs={12} md={8}>
{
<LazyLoad>

<video
ref="videoRef"
id= "some-video"
onTimeUpdate={this.timestart}
onLoadedData={(e) => this.refs.videoRef.play()}
controls
autoplay
style={{ width: "100%", height: "auto" }}z
>
<source src={video.videoUrl} type="video/mp4" />
</video>
</LazyLoad>
</Aux>

Answer 1

您能详细说明为什么使用some-video吗？实例化视频播放器是绕过你定义的视频标签ID的ID或构造函数参数。

以下是React中的一个代码示例：https://codesandbox.io/s/video-player-forked-j3bgp以下是创建它的步骤：https://cloudinary.com/documentation/video_player_how_to_embed#self_hosted_player

Answer 2

有几个问题。

1. 首先，我看到您正在使用一个名为"LazyLoader"的组件。"video"元素是此组件的子元素，因此您需要确保视频元素不会在'componentDidMount'之后加载。

2. 你应该在组件被销毁后销毁播放器实例。Cloudinary视频播放器正在使用Video.js：https://docs.videojs.com/tutorial-react.html

componentDidMount() {
this.player = cld.videoPlayer("some-video")
}

componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}

3. Cloudinery Core实例应该创建一次，您应该移动

var cld=new Cloudinary({cloud_name:"demo"，secure:true}(；

到主应用程序，并将其作为道具(或从商店(传递给子组件。

1. 'ld.videoPlayer'还可以获得一个元素，而不仅仅是一个id，这样你就可以把它传给"videoRef">