Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JM-07
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
JM-07
Commits
7f67d0ae
Commit
7f67d0ae
authored
Jul 27, 2021
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:增加学生端样式
parent
3fab72fa
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
103 additions
and
12 deletions
+103
-12
logo.png
lib/images/logo.png
+0
-0
index.css
play/index.css
+30
-0
index.html
play/index.html
+51
-4
index.js
play/index.js
+22
-8
No files found.
lib/images/logo.png
0 → 100644
View file @
7f67d0ae
3.35 KB
play/index.css
View file @
7f67d0ae
...
...
@@ -96,6 +96,10 @@ body {
cursor
:
pointer
;
}
.speed-active
{
color
:
#2f9228
;
}
.progress-div
{
position
:
absolute
;
width
:
80%
;
...
...
@@ -264,4 +268,30 @@ body {
width
:
40px
;
height
:
40px
;
display
:
none
;
}
.hello-container
{
position
:
absolute
;
left
:
0px
;
top
:
0px
;
right
:
0px
;
bottom
:
0px
;
display
:
none
;
}
.jinmao-bottom
{
position
:
absolute
;
width
:
100%
;
height
:
25%
;
bottom
:
0px
;
background
:
url(../lib/images/bottom-white.png)
no-repeat
;
background-size
:
100%
100%
;
background-position-y
:
bottom
;
}
.jinmao-logo
{
position
:
absolute
;
bottom
:
14px
;
right
:
20px
;
width
:
20%
;
}
\ No newline at end of file
play/index.html
View file @
7f67d0ae
...
...
@@ -21,9 +21,9 @@
<span
class=
"title"
>
请同学们根据视频复述课文
</span>
</div>
<div
class=
"video-container"
>
<video
id=
"video"
src=
""
></video>
<video
src=
""
></video>
</div>
<div
id=
'playSpeed'
class=
"play-speed-content"
>
<div
class=
"play-speed-content"
>
<p
class=
"speed"
style=
"font-size: 20px; line-height: 40px;"
>
倍数
</p>
<p
class=
"speed speed-choice"
data-speed=
"0.75"
>
0.75x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1"
>
1x
</p>
...
...
@@ -33,7 +33,7 @@
</div>
<div
class=
"progress-div"
>
<div
class=
"progress-label-left"
>
<span
id=
"cur-time"
class=
"progress-label
"
>
00:00
</span>
<span
class=
"progress-label cur-time
"
>
00:00
</span>
</div>
<div
class=
"progress my-progress"
>
<div
class=
"progress-bar my-progress-bar"
role=
"progressbar"
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
style=
"width: 60%;"
>
...
...
@@ -41,7 +41,7 @@
</div>
</div>
<div
class=
" progress-label-right"
>
<span
id=
"total-time"
class=
"progress-label
"
>
00:00
</span>
<span
class=
"progress-label total-time
"
>
00:00
</span>
</div>
</div>
<div
class=
"video-play-bg"
>
...
...
@@ -55,6 +55,53 @@
</div>
</div>
<div
role=
"stu"
id=
"stu"
>
<div
id=
"exercise"
style=
"display: none;"
>
<div
style=
"position: absolute; top: 25px; left: 10%; z-index: 99;"
>
<span
class=
"title"
>
请同学们根据视频复述课文
</span>
</div>
<div
class=
"video-container"
>
<video
id=
"video"
src=
""
></video>
</div>
<div
class=
"play-speed-content"
>
<p
class=
"speed"
style=
"font-size: 20px; line-height: 40px;"
>
倍数
</p>
<p
class=
"speed speed-choice"
data-speed=
"0.75"
>
0.75x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1"
>
1x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1.25"
>
1.25x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1.5"
>
1.5x
</p>
<p
class=
"speed speed-choice"
data-speed=
"2"
>
2x
</p>
</div>
<div
class=
"progress-div"
>
<div
class=
"progress-label-left"
>
<span
class=
"progress-label cur-time"
>
00:00
</span>
</div>
<div
class=
"progress my-progress"
>
<div
class=
"progress-bar my-progress-bar"
role=
"progressbar"
aria-valuenow=
"0"
aria-valuemin=
"0"
aria-valuemax=
"100"
style=
"width: 60%;"
>
</div>
</div>
<div
class=
" progress-label-right"
>
<span
class=
"progress-label total-time"
>
00:00
</span>
</div>
</div>
<div
class=
"video-play-bg"
>
<img
src=
"../lib/images/play-circle.png"
id=
'ani'
class=
"video-play-ani"
>
<div
class=
"recorder-play-icon"
>
<div
class=
"control recorder-play"
>
</div>
<img
src=
"../lib/images/recorder-pasue.png"
class=
"recorder-pause"
>
</div>
</div>
</div>
<div
class=
"hello-container"
>
<img
id=
"stuimage"
src=
""
alt=
""
style=
"object-fit: cover; width: 100%; height: 100%;"
>
<div
class=
"jinmao-bottom"
>
<img
class=
"jinmao-logo"
src=
"../lib/images/logo.png"
alt=
""
>
</div>
</div>
</div>
</div>
</body>
<script
src=
"./index.js"
></script>
...
...
play/index.js
View file @
7f67d0ae
...
...
@@ -73,7 +73,19 @@ class PlayView {
$
(
"
[role='tea']
"
).
show
();
// 老师特定的页面
}
else
{
$
(
"
[role='stu']
"
).
show
();
// 老师特定的页面
bindRecorderBtn
();
bindSpeedBtn
();
//$(".hello-container").show();
$
(
"
#exercise
"
).
show
();
// 学生特定的页面
$
(
"
[role='stu']
"
).
show
();
}
if
(
this
.
data
.
video
)
{
...
...
@@ -84,17 +96,15 @@ class PlayView {
if
(
video
.
readyState
>
0
){
let
totalTime
=
getTimeStr
(
video
.
duration
);
$
(
"
#
total-time
"
).
empty
();
$
(
"
#
total-time
"
).
append
(
totalTime
);
$
(
"
.
total-time
"
).
empty
();
$
(
"
.
total-time
"
).
append
(
totalTime
);
}
},
100
);
}
bindRecorderBtn
();
bindSpeedBtn
();
}
...
...
@@ -178,14 +188,18 @@ function getTimeStr(time) {
function
bindSpeedBtn
(){
$
(
"
.speed-choice
"
).
click
(
function
()
{
$
(
"
.speed-choice
"
).
removeClass
(
'
speed-active
'
);
$
(
this
).
addClass
(
'
speed-active
'
);
const
video
=
$
(
"
#video
"
)[
0
];
let
speed
=
$
(
this
).
attr
(
'
data-speed
'
);
console
.
log
(
speed
);
if
(
video
){
video
.
playbackRate
=
speed
;
}
video
.
play
();
});
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment