阿里云视频点播在React中的实现

在原项目组件上进行了删减,保留核心代码,不一定能直接运行,需要根据情况调整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React, { Component } from 'react';
import { hashHistory } from 'react-router';

class CourseDetail extends Component {
constructor(props) {
super(props);
this.state = {};

this.player = null; // 创建播放器实例变量
}


componentDidMount() {
// 初始化播放器,
this.player = new Aliplayer({
id: 'Ali_Player', // 容器id
vid: '',
width: "100%", // 播放器宽度
playauth: '',
cover: `${IMG_DOMAIN}${data.data.serviceCourseDto.serviceCourse.coverUrl}`,
autoplay: false,
rePlay: false,
skinLayout:[{"name":"H5Loading","align":"cc"},
{"name":"errorDisplay","align":"tlabs","x":0,"y":0},
{"name":"infoDisplay","align":"cc"},
{"name":"controlBar","align":"blabs","x":0,"y":0,"children":[{"name":"progress","align":"tlabs","x":0,"y":0},
{"name":"timeDisplay","align":"tl","x":10,"y":24}]}]
});

this.player.on('play',()=>{
if(this.state.cur_courseitem.courseItemId){
this.player.play();
} else {
this.player.pause();
Toast.info('请选择章节');
}
})
}

handlePlay = (courseItemId) => {
// 播放事件,此时获取播放凭证,也可以在挂载的时候获取播放凭证
loadVideoPalyAuth({courseItemId}).then(data => {
this.setState({
cur_courseitem: {
...this.state.cur_courseitem,
videoId: data.data.aliVideoPlayAuthDto.videoId,
playauth: data.data.aliVideoPlayAuthDto.playAuth,
courseItemId: courseItemId
}
},()=>{
if (this.player){
this.player.dispose();
}

this.player = new Aliplayer({
id: 'Ali_Player', // 容器id
vid: data.data.aliVideoPlayAuthDto.videoId,
width: "100%", // 播放器宽度
playauth: data.data.aliVideoPlayAuthDto.playAuth,
autoplay: false,
rePlay: false,
});
});
})
}

render() {
return (
<div>
<button onClick={this.handlePlay}>播放</button>
<div className="prism-player" id='Ali_Player' />
</div>
);
}
}

export default CourseDetail;