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
| <template>
| <div >
| <div id="dplayer"></div>
| </div>
| </template>
|
|
| <script>
| import DPlayer from 'dplayer';
|
| export default {
| name: 'VideoPlayer',
| components:{},
| data() {
| return {
| winH: '300px',
| id: 'dpPlayerDom',
| player: null,
| filePath:'',
| type:'',
| url:'',
| dp: null,
| time: 5,
| }
|
| },
| mounted() {
| this.initDPlayer();
| },
| methods: {
| initDPlayer() {
| this.dp = new DPlayer({
| container: document.getElementById('dplayer'), // 确保你的 HTML 中有这个元素
| danmaku: {
| speedRate: 0.5,
| api: 'http://192.168.0.147:8889/training/trainingContentCommon/getDanmaku',// 添加弹幕的后端地址
| user: this.$store.getters.userId,
| bottom: "15%",
| id: 1
| },
| video: {
| url: 'static/1080p.mp4', // 这里填写视频的 URL
| //url: 'static/911Mothers_2010W-480p.mp4', // 这里填写视频的 URL
| pic: '/Users/kongdeqiang/Downloads/image/v2-1e575237731ad3d8169dfedb6658ed19_r.jpg', // 这里填写视频的封面图地址，可选
| type: 'auto', // 可选，自动判断类型，或者指定为 'hls', 'flv' 等
| autoPlay:true
| },
| // 其他配置...
| });
| // this.$nextTick(()=>{
| // if(this.time){
| // this.dp.seek(this.time)
| // }
| // })
|
| },
|
| beforeDestroy() {
| if (this.dp) {
| this.dp.destroy(); // 销毁播放器实例，释放资源
| }
| }
| }
| }
| </script>
| <style>
|
| </style>
|
|
