home.html
6.93 KB
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<title>视频会议-房间</title>
<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/video.css">
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript" src="js/iconfont.js"></script>
</head>
<style type="text/css">
body {
background-color: #000000;
}
</style>
<body >
<div id="app">
<el-container>
<el-header>
<div class="home-header">
<span class="home-header-title">{{ roomName }}的视频会议 (ID：{{ roomId }} )</span>
</div>
</el-header>
<el-main>
<el-container style="background-color:#272C33;" height="862px;">
<el-aside width="77%" style="background-color: #272C33;">
<div style="width: 100%;" align="center">
<div style="padding: 24px 24px 24px 24px;">
<div style="margin-top: 10px;background-color: #000000;">
<video id="mainVideo" class="video-js vjs-big-play-centered" height="862px" playsinline muted autoplay data-setup='{}'>
<source src="喵喵2.mp4" type='video/mp4' />
</video>
</div>
</div>
</div>
</el-aside>
<el-main style="height: 910px;">
<p>
<video id="sideVideo1" class="video-js vjs-big-play-centered" width="371px" height="210px" playsinline muted autoplay data-setup='{}'>
<source src="喵喵2.mp4" type='video/mp4' />
</video>
</p>
<p>
<video id="sideVideo2" class="video-js vjs-big-play-centered" width="371px" height="210px" playsinline muted autoplay data-setup='{}'>
<source src="喵喵2.mp4" type='video/mp4' />
</video>
</p>
<p>
<video id="sideVideo3" class="video-js vjs-big-play-centered" width="371px" height="210px" playsinline muted autoplay data-setup='{}'>
<source src="喵喵2.mp4" type='video/mp4' />
</video>
</p>
<p>
<video id="sideVideo3" class="video-js vjs-big-play-centered" width="371px" height="210px" playsinline muted autoplay data-setup='{}'>
<source src="喵喵2.mp4" type='video/mp4' />
</video>
</p>
<!-- <video id="sideVideo4" class="video-js vjs-big-play-centered" width="371px" height="210px" muted controls preload="auto" autoplay data-setup='{}'>
<source src="喵喵2.mp4" type='video/mp4' />
</video> -->
</el-main>
</el-container>
</el-main>
<el-footer>
<el-row :gutter="20" style="text-align: center;">
<el-col :span="4"><div class="grid-content"></div></el-col>
<el-col :span="16">
<div class="grid-content">
<el-row>
<el-col :span="4">
<el-button type="primary" class="icon-area">
<svg class="icon" aria-hidden="true"><use xlink:href="#iconicon-microphone-on"></use></svg>
</el-button>
</el-col>
<el-col :span="4">
<el-button type="primary" class="icon-area">
<svg class="icon" aria-hidden="true"><use xlink:href="#iconicon-volume"></use></svg>
</el-button>
</el-col>
<el-col :span="4">
<el-button type="primary" class="icon-area">
<svg class="icon" aria-hidden="true"><use xlink:href="#iconicon-camera-on"></use></svg>
</el-button>
</el-col>
<el-col :span="4">
<el-button type="primary" class="icon-area">
<svg class="icon" aria-hidden="true"><use xlink:href="#iconicon-sharescreen"></use></svg>
</el-button>
</el-col>
<el-col :span="4">
<el-button type="primary" class="icon-area">
<svg class="icon" aria-hidden="true"><use xlink:href="#iconicon-share"></use></svg>
</el-button>
</el-col>
<el-col :span="4">
<el-button type="primary" class="icon-area">
<svg class="icon room-exit" aria-hidden="true"><use xlink:href="#iconicon-stop"></use></svg>
</el-button>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="4"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20" style="margin-bottom: 50px;text-align: center;">
<el-col :span="4"><div class="grid-content"></div></el-col>
<el-col :span="16">
<div class="grid-content">
<el-row>
<el-col :span="4"><span>麦克风</span></el-col>
<el-col :span="4"><span>声音</span></el-col>
<el-col :span="4"><span>摄像头</span></el-col>
<el-col :span="4"><span>屏幕分享</span></el-col>
<el-col :span="4"><span>邀请加人</span></el-col>
<el-col :span="4"><span>结束</span></el-col>
</el-row>
</div>
</el-col>
<el-col :span="4"><div class="grid-content"></div></el-col>
</el-row>
<!-- <el-row style="margin-bottom: 50px;">
<el-col :span="4"></el-col>
<el-col :span="16">
<div class="grid-content " >
<el-row>
<el-col :span="4"><span>麦克风</span></el-col>
<el-col :span="4"><span>声音</span></el-col>
<el-col :span="4"><span>摄像头</span></el-col>
<el-col :span="4"><span>屏幕分享</span></el-col>
<el-col :span="4"><span>邀请加人</span></el-col>
<el-col :span="4"><span>结束</span></el-col>
</el-row>
</div>
</el-col>
<el-col :span="4"></el-col>
</el-row> -->
</el-footer>
</el-container>
</div>
</body>
<script>
new Vue({
el: '#app',
data(){
return {
roomName: '吴波波',
roomId: '88888888',
}
},
created() {
this.initVideo();
},
methods: {
initVideo() {
// //初始化视频方法
// let myPlayer = videojs(myVideo, {
// //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
// autoplay: true,
// controls: false,
// //自动播放属性,muted:静音播放
// //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
// preload: "auto",
// //设置视频播放器的显示宽度（以像素为单位）
// width: "1477px",
// //设置视频播放器的显示高度（以像素为单位）
// height: "862px"
// });
//初始化视频
// let player = videojs('mainVideo',{
// //像data-setup那样设置的参数
// },function onPlayerReady(){
// console.log('0000000');
// //视频播放器初始化完毕，就会调用这个回调函数
// this.src({
// src: "https://vjs.zencdn.net/v/oceans.mp4",
// type:'video/mp4'
// });
// // this.play();
// });
}
}
})
</script>
</html>