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
995f016f
Commit
995f016f
authored
Aug 01, 2021
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:完成部分样式开发
parent
7f67d0ae
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
644 additions
and
47 deletions
+644
-47
index.css
form/index.css
+29
-0
index.html
form/index.html
+22
-1
index.js
form/index.js
+38
-1
back.png
lib/images/back.png
+0
-0
clip.png
lib/images/clip.png
+0
-0
index.css
play/index.css
+179
-2
index.html
play/index.html
+67
-15
index.js
play/index.js
+298
-28
util.js
play/util.js
+11
-0
No files found.
form/index.css
View file @
995f016f
...
@@ -12,6 +12,20 @@
...
@@ -12,6 +12,20 @@
line-height
:
30px
;
line-height
:
30px
;
}
}
.upload-container
{
width
:
300px
;
height
:
100px
;
position
:
relative
;
border-radius
:
2px
;
border
:
1px
solid
#dcdfe6
;
line-height
:
100px
;
margin
:
10px
;
text-align
:
center
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
.hide-fileinput
{
.hide-fileinput
{
position
:
absolute
;
position
:
absolute
;
top
:
0px
;
top
:
0px
;
...
@@ -20,4 +34,19 @@
...
@@ -20,4 +34,19 @@
height
:
100%
;
height
:
100%
;
opacity
:
0
;
opacity
:
0
;
cursor
:
pointer
;
cursor
:
pointer
;
}
.image
{
width
:
auto
;
height
:
auto
;
max-width
:
100%
;
max-height
:
100%
;
display
:
none
;
}
.stu-image
{
width
:
auto
;
height
:
auto
;
max-width
:
100%
;
max-height
:
100%
;
display
:
none
;
}
}
\ No newline at end of file
form/index.html
View file @
995f016f
...
@@ -23,6 +23,12 @@
...
@@ -23,6 +23,12 @@
</div>
</div>
<div
class=
"panel-body"
>
<div
class=
"panel-body"
>
<form
class=
"form-horizontal"
enctype=
"multipart/form-data"
>
<form
class=
"form-horizontal"
enctype=
"multipart/form-data"
>
<div
class=
"form-group"
>
<label
for=
"video"
class=
"col-sm-2 control-label"
>
标题
</label>
<div
class=
"col-sm-6"
>
<input
type=
"text"
class=
"form-control"
id=
"title"
placeholder=
"标题"
value=
"请同学们根据视频复述课文"
>
</div>
</div>
<div
class=
"form-group"
>
<div
class=
"form-group"
>
<label
for=
"video"
class=
"col-sm-2 control-label"
>
视频
</label>
<label
for=
"video"
class=
"col-sm-2 control-label"
>
视频
</label>
<div
class=
"col-sm-2"
>
<div
class=
"col-sm-2"
>
...
@@ -31,7 +37,22 @@
...
@@ -31,7 +37,22 @@
<video
class=
"video"
id=
"showVideo"
src=
""
controls=
"controls"
></video>
<video
class=
"video"
id=
"showVideo"
src=
""
controls=
"controls"
></video>
</div>
</div>
</div>
</div>
<div
class=
"form-group"
>
<label
for=
"video"
class=
"col-sm-2 control-label"
>
关键词
</label>
<div
class=
"col-sm-6"
>
<input
type=
"text"
class=
"form-control"
id=
"keyWord"
placeholder=
"多个关键词用','隔开,例:word,test"
>
</div>
</div>
<div
class=
"form-group"
>
<label
for=
"video"
class=
"col-sm-2 control-label"
>
学生端展示图片
</label>
<div
class=
"col-sm-2"
>
<div
class=
"upload-container"
>
<div
class=
"unimage"
>
上传图片
</div>
<img
class=
"stu-image"
src=
""
id=
'stuImage'
>
<input
class=
"hide-fileinput"
type=
"file"
name=
"stuImage"
accept=
"image/*"
>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
...
...
form/index.js
View file @
995f016f
...
@@ -26,9 +26,11 @@ class FormView {
...
@@ -26,9 +26,11 @@ class FormView {
initDefaultData
()
{
initDefaultData
()
{
if
(
!
this
.
data
)
{
if
(
!
this
.
data
)
{
this
.
data
=
{};
this
.
data
=
{
title
:
'
请同学们根据视频复述课文
'
};
this
.
save
();
}
}
}
}
initView
()
{
initView
()
{
...
@@ -38,6 +40,15 @@ class FormView {
...
@@ -38,6 +40,15 @@ class FormView {
_dom
.
find
(
"
.video
"
).
attr
(
"
src
"
,
this
.
data
.
video
).
show
();
_dom
.
find
(
"
.video
"
).
attr
(
"
src
"
,
this
.
data
.
video
).
show
();
}
}
if
(
this
.
data
.
stuImage
){
_dom
.
find
(
"
.stu-image
"
).
attr
(
"
src
"
,
this
.
data
.
stuImage
).
show
();
}
$
(
"
#keyWord
"
).
val
(
this
.
data
.
keyWord
);
$
(
"
#title
"
).
val
(
this
.
data
.
title
);
const
_this
=
this
;
const
_this
=
this
;
_dom
.
find
(
"
[name='video']
"
).
change
(
function
()
{
_dom
.
find
(
"
[name='video']
"
).
change
(
function
()
{
...
@@ -55,6 +66,32 @@ class FormView {
...
@@ -55,6 +66,32 @@ class FormView {
}
}
});
});
});
});
_dom
.
find
(
"
[name='stuImage']
"
).
change
(
function
()
{
const
files
=
$
(
this
).
prop
(
'
files
'
);
$
(
this
).
attr
(
"
disabled
"
,
true
);
$
(
this
).
prev
().
text
(
"
上传中...
"
);
commonUploadFile
(
files
[
0
],
(
data
)
=>
{
$
(
this
).
attr
(
"
disabled
"
,
false
);
$
(
this
).
prev
().
text
(
"
上传图片
"
);
if
(
data
)
{
const
d
=
JSON
.
parse
(
data
);
$
(
"
#stuImage
"
).
attr
(
"
src
"
,
d
.
url
).
show
();
_this
.
data
.
stuImage
=
d
.
url
;
_this
.
save
();
}
});
});
$
(
"
#keyWord
"
).
change
(
function
(){
_this
.
data
.
keyWord
=
$
(
this
).
val
();
_this
.
save
();
})
$
(
"
#title
"
).
change
(
function
(){
_this
.
data
.
title
=
$
(
this
).
val
();
_this
.
save
();
});
}
}
saveTmsp
=
null
;
saveTmsp
=
null
;
...
...
lib/images/back.png
0 → 100644
View file @
995f016f
580 Bytes
lib/images/clip.png
0 → 100644
View file @
995f016f
36.6 KB
play/index.css
View file @
995f016f
...
@@ -57,7 +57,7 @@ body {
...
@@ -57,7 +57,7 @@ body {
}
}
.video-container
{
.video-container
{
position
:
relativ
e
;
position
:
absolut
e
;
width
:
60%
;
width
:
60%
;
height
:
50%
;
height
:
50%
;
left
:
20%
;
left
:
20%
;
...
@@ -146,7 +146,13 @@ body {
...
@@ -146,7 +146,13 @@ body {
background-color
:
#3e9b31
;
background-color
:
#3e9b31
;
}
}
#video
{
.progress-bar-no-ani
{
-webkit-transition
:
width
0s
ease
;
-o-transition
:
width
0s
ease
;
transition
:
width
0s
ease
;
}
.video
{
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
}
}
...
@@ -218,6 +224,32 @@ body {
...
@@ -218,6 +224,32 @@ body {
100
%
{
box-shadow
:
0px
0px
0px
0px
#e7cc97
;
transform
:
scale
(
.99
,
.99
);
}
100
%
{
box-shadow
:
0px
0px
0px
0px
#e7cc97
;
transform
:
scale
(
.99
,
.99
);
}
}
}
.recorder-tips
{
position
:
absolute
;
width
:
310%
;
height
:
100px
;
background
:
#3e9e33
;
border-radius
:
15px
;
text-align
:
center
;
color
:
#fff
;
line-height
:
100px
;
font-size
:
25px
;
top
:
-100px
;
left
:
-105%
;
}
.triangle-down
{
width
:
0
;
height
:
0
;
border-left
:
20px
solid
transparent
;
border-right
:
20px
solid
transparent
;
border-top
:
40px
solid
#3e9e33
;
position
:
absolute
;
left
:
50%
;
transform
:
translate
(
-50%
);
bottom
:
-18px
;
}
.recorder-play-icon
{
.recorder-play-icon
{
width
:
100px
;
width
:
100px
;
height
:
100px
;
height
:
100px
;
...
@@ -277,6 +309,7 @@ body {
...
@@ -277,6 +309,7 @@ body {
right
:
0px
;
right
:
0px
;
bottom
:
0px
;
bottom
:
0px
;
display
:
none
;
display
:
none
;
z-index
:
1000
;
}
}
.jinmao-bottom
{
.jinmao-bottom
{
...
@@ -294,4 +327,148 @@ body {
...
@@ -294,4 +327,148 @@ body {
bottom
:
14px
;
bottom
:
14px
;
right
:
20px
;
right
:
20px
;
width
:
20%
;
width
:
20%
;
}
.my-btn
{
border
:
solid
6px
#b17d5a
;
background
:
#e7cc97
;
border-radius
:
21px
;
color
:
#fff
;
cursor
:
pointer
;
}
.sent-btn
{
text-align
:
center
;
height
:
65px
;
line-height
:
55px
;
width
:
240px
;
font-size
:
30px
;
font-weight
:
bold
;
position
:
absolute
;
right
:
10%
;
bottom
:
7%
;
box-shadow
:
0px
34px
17px
-25px
#e7cc97
;
}
.back-btn
{
text-align
:
center
;
height
:
65px
;
line-height
:
55px
;
width
:
120px
;
font-size
:
30px
;
font-weight
:
bold
;
position
:
absolute
;
left
:
9%
;
bottom
:
7%
;
box-shadow
:
0px
34px
17px
-25px
#e7cc97
;
display
:
none
;
}
.submit-btn
{
text-align
:
center
;
height
:
65px
;
line-height
:
55px
;
width
:
240px
;
font-size
:
30px
;
font-weight
:
bold
;
position
:
absolute
;
right
:
10%
;
bottom
:
7%
;
box-shadow
:
0px
34px
17px
-25px
#e7cc97
;
display
:
none
;
}
.back-tips
{
position
:
absolute
;
width
:
25%
;
height
:
100px
;
background
:
#3e9e33
;
border-radius
:
15px
;
text-align
:
center
;
color
:
#fff
;
line-height
:
100px
;
font-size
:
25px
;
bottom
:
14%
;
left
:
4%
;
}
.mask
{
width
:
100%
;
height
:
100%
;
z-index
:
99999
;
position
:
fixed
;
filter
:
Alpha
(
opacity
=
60
);
background-color
:
black
;
top
:
0
;
left
:
0
;
opacity
:
0.6
}
.dialog-submit
{
position
:
relative
;
width
:
100%
;
height
:
400px
;
}
.clip
{
position
:
absolute
;
left
:
17%
;
margin-top
:
-51px
;
}
.submit
{
position
:
absolute
;
font-family
:
HiraKakuStd-W8
;
font-size
:
52px
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
line-height
:
normal
;
letter-spacing
:
normal
;
text-align
:
center
;
color
:
#ffffff
;
margin-left
:
43%
;
z-index
:
1
;
}
.warning
{
font-family
:
PingFangSC
;
font-size
:
48px
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
line-height
:
normal
;
letter-spacing
:
normal
;
color
:
#ffffff
;
text-align
:
center
;
margin-top
:
40px
;
}
.my-btn2
{
border-radius
:
20px
;
background-color
:
#f1e4c2
;
width
:
300px
;
height
:
80px
;
font-family
:
PingFangSC
;
font-size
:
40px
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
line-height
:
80px
;
letter-spacing
:
normal
;
text-align
:
center
;
color
:
#3e9e33
;
cursor
:
pointer
;
box-shadow
:
0px
5px
12px
5px
#0a6500
;
margin-left
:
25%
;
}
.submit-press
{
animation
:
submit-press
.1s
forwards
;
}
@keyframes
submit-press
{
100
%
{
box-shadow
:
0px
0px
0px
0px
#0a6500
;
transform
:
scale
(
.99
,
.99
);
}
}
}
\ No newline at end of file
play/index.html
View file @
995f016f
...
@@ -16,12 +16,13 @@
...
@@ -16,12 +16,13 @@
<body>
<body>
<div
class=
"content"
>
<div
class=
"content"
>
<div
style=
"position: absolute; top: 25px; left: 10%; z-index: 99;"
>
<span
class=
"title"
>
请同学们根据视频复述课文
</span>
</div>
<div
role=
"tea"
id=
"tea"
>
<div
role=
"tea"
id=
"tea"
>
<div
style=
"position: absolute; top: 25px; left: 10%; z-index: 99;"
>
<span
class=
"title"
>
请同学们根据视频复述课文
</span>
</div>
<div
class=
"video-container"
>
<div
class=
"video-container"
>
<video
src=
""
></video>
<video
class=
"video"
src=
""
></video>
</div>
</div>
<div
class=
"play-speed-content"
>
<div
class=
"play-speed-content"
>
<p
class=
"speed"
style=
"font-size: 20px; line-height: 40px;"
>
倍数
</p>
<p
class=
"speed"
style=
"font-size: 20px; line-height: 40px;"
>
倍数
</p>
...
@@ -36,7 +37,7 @@
...
@@ -36,7 +37,7 @@
<span
class=
"progress-label cur-time"
>
00:00
</span>
<span
class=
"progress-label cur-time"
>
00:00
</span>
</div>
</div>
<div
class=
"progress my-progress"
>
<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: 6
0%;"
>
<div
class=
"progress-bar my-progress-bar"
role=
"progressbar"
aria-valuenow=
"
0"
aria-valuemin=
"0"
aria-valuemax=
"100"
style=
"width:
0%;"
>
</div>
</div>
</div>
</div>
...
@@ -53,16 +54,16 @@
...
@@ -53,16 +54,16 @@
<img
src=
"../lib/images/recorder-pasue.png"
class=
"recorder-pause"
>
<img
src=
"../lib/images/recorder-pasue.png"
class=
"recorder-pause"
>
</div>
</div>
</div>
</div>
<div
class=
"my-btn sent-btn"
>
Sent
</div>
</div>
</div>
<div
role=
"stu"
id=
"stu"
>
<div
role=
"stu"
id=
"stu"
>
<div
id=
"exercise"
style=
"display: none;"
>
<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"
>
<div
class=
"video-container"
>
<video
id=
"video"
src=
""
></video>
<video
id=
"video"
class=
"video"
src=
""
></video>
</div>
</div>
<div
class=
"play-speed-content"
>
<div
class=
"play-speed-content"
>
<p
class=
"speed"
style=
"font-size: 20px; line-height: 40px;"
>
倍数
</p>
<p
class=
"speed"
style=
"font-size: 20px; line-height: 40px;"
>
倍数
</p>
...
@@ -74,19 +75,34 @@
...
@@ -74,19 +75,34 @@
</div>
</div>
<div
class=
"progress-div"
>
<div
class=
"progress-div"
>
<div
class=
"progress-label-left"
>
<div
class=
"progress-label-left"
>
<span
class=
"progress-label cur-time"
>
00:00
</span>
<span
class=
"progress-label cur-time"
id=
"curTime"
>
00:00
</span>
</div>
</div>
<div
class=
"progress my-progress"
>
<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: 6
0%;"
>
<div
class=
"progress-bar my-progress-bar
progress-bar-no-ani"
role=
"progressbar"
id=
"progressbar"
data-value=
'0'
style=
"width:
0%;"
>
</div>
</div>
<div
class=
"progress-bar progress-bar-danger progress-bar-no-ani"
id=
"tempProgressbar"
data-value=
'0'
style=
"width: 0%"
>
<span
class=
"sr-only"
></span>
</div>
</div>
</div>
<div
class=
" progress-label-right"
>
<div
class=
" progress-label-right"
>
<span
class=
"progress-label total-time"
>
00:00
</span>
<span
class=
"progress-label total-time"
id=
"totalTime"
>
00:00
</span>
</div>
</div>
</div>
</div>
<div
class=
"back-tips"
style=
"display: none;"
>
点击删除最新录制的一段录音
<div
class=
"triangle-down"
style=
"left: 30%;"
></div>
</div>
<div
class=
"my-btn back-btn"
id=
"backBtn"
>
<img
style=
"width: 40%; height: auto;"
src=
"../lib/images/back.png"
>
</div>
<div
class=
"video-play-bg"
>
<div
class=
"video-play-bg"
>
<img
src=
"../lib/images/play-circle.png"
id=
'ani'
class=
"video-play-ani"
>
<img
src=
"../lib/images/play-circle.png"
id=
'ani'
class=
"video-play-ani"
>
<div
class=
"recorder-tips"
>
点击开始录制,再次点击可暂停
<div
class=
"triangle-down"
></div>
</div>
<div
class=
"recorder-play-icon"
>
<div
class=
"recorder-play-icon"
>
<div
class=
"control recorder-play"
>
<div
class=
"control recorder-play"
>
...
@@ -94,16 +110,52 @@
...
@@ -94,16 +110,52 @@
<img
src=
"../lib/images/recorder-pasue.png"
class=
"recorder-pause"
>
<img
src=
"../lib/images/recorder-pasue.png"
class=
"recorder-pause"
>
</div>
</div>
</div>
</div>
<div
class=
"my-btn submit-btn"
id=
"submitBtn"
>
Submit
</div>
</div>
</div>
<div
class=
"hello-container"
>
<div
class=
"hello-container"
>
<img
id=
"stuimage"
src=
""
alt=
""
style=
"object-fit: cover; width: 100%; height: 100%;"
>
<img
id=
"stuimage"
src=
""
alt=
""
style=
"object-fit: cover; width: 100%; height: 100%;
"
>
<div
class=
"jinmao-bottom"
>
<div
class=
"jinmao-bottom"
>
<img
class=
"jinmao-logo"
src=
"../lib/images/logo.png"
alt=
""
>
<img
class=
"jinmao-logo"
src=
"../lib/images/logo.png"
alt=
""
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"modal fade"
id=
'submitDialog'
aria-hidden=
"false"
data-backdrop=
"static"
>
<div
class=
"modal-dialog modal-lg"
style=
"width:60%; margin: 18% auto;"
>
<div
class=
"modal-content"
style=
"border-radius: 36px;background-color: #3e9e33"
>
<div
class=
"modal-body"
style=
"padding: 0px;"
>
<div
class=
"dialog-submit"
>
<span
class=
"submit"
>
Submit
</span>
<img
src=
"../lib/images/clip.png"
class=
"clip"
>
<table
style=
"width: 100%; height: 84%; position: relative; top: 16%;"
>
<tr>
<td
colspan=
"2"
>
<h1
class=
"warning"
>
本题只能提交一次,确定交卷吗?
</h1>
</td>
</tr>
<tr>
<td>
<div
class=
"my-btn2"
id=
"continueBtn"
>
继续录制
</div>
</td>
<td>
<div
class=
"my-btn2"
id=
"confirmBtn"
>
确定
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
<script
src=
"./index.js"
></script>
<script
src=
"./index.js"
></script>
<script
src=
"./util.js"
></script>
</html>
</html>
\ No newline at end of file
play/index.js
View file @
995f016f
...
@@ -6,7 +6,7 @@ window.courseware.getData(callback,key); //用于获取数据
...
@@ -6,7 +6,7 @@ window.courseware.getData(callback,key); //用于获取数据
window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调用此方法,用于隐藏遮罩层
window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调用此方法,用于隐藏遮罩层
*/
*/
var
cw
=
window
.
courseware
;
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var
key
=
"
JM-07
"
;
var
key
=
"
JM-07
"
;
...
@@ -15,10 +15,35 @@ var USERINFO = null;
...
@@ -15,10 +15,35 @@ var USERINFO = null;
var
ROLE
=
null
;
var
ROLE
=
null
;
var
defaultData
=
'
{"stuImage":"http://staging-teach.cdn.ireadabc.com/0623b0c0d8b1da234f64959a8826e113.jpg","video":"http://staging-teach.cdn.ireadabc.com/bcb8b751b98371ea71956a1d1a447956.mp4"}
'
;
// 维护切面数据
var
teaUserAspect
=
{
isSendQuestion
:
false
,
// 是否是答题环节
bindData
:
null
};
var
stuUserAspect
=
{
speed
:
1
,
//播放速度
videoCurTime
:
0
,
//播放进度
recorderScoreObj
:
null
,
// 这块只记录一个最好的成绩
recorderArr
:
[],
//录音记录
isPause
:
true
,
firstClickRecorder
:
true
,
firstClickCancel
:
true
,
};
//进度条刷新是否启动
var
started
=
false
;
var
tempRecorder
;
$
(
function
()
{
$
(
function
()
{
window
.
courseware
.
getData
(
function
(
data
)
{
window
.
courseware
.
getData
(
function
(
data
)
{
//初始化监听事件
initListener
();
USERINFO
=
window
.
air
.
airClassInfo
.
user
;
USERINFO
=
window
.
air
.
airClassInfo
.
user
;
ROLE
=
USERINFO
.
classRole
;
ROLE
=
USERINFO
.
classRole
;
...
@@ -56,21 +81,24 @@ class PlayView {
...
@@ -56,21 +81,24 @@ class PlayView {
initDefaultData
()
{
initDefaultData
()
{
if
(
!
this
.
data
)
{
if
(
!
this
.
data
)
{
this
.
data
=
{}
;
this
.
data
=
JSON
.
parse
(
defaultData
)
;
}
}
console
.
log
(
this
.
data
);
}
}
initData
()
{
initData
()
{
teaUserAspect
.
bindData
=
this
.
data
;
}
}
initView
()
{
initView
()
{
if
(
ROLE
==
"
tea
"
)
{
if
(
ROLE
==
"
tea
"
)
{
$
(
"
[role='tea']
"
).
show
();
// 老师特定的页面
$
(
"
[role='tea']
"
).
show
();
// 老师特定的页面
//绑定sent事件
bindSentBtn
();
}
}
else
{
else
{
...
@@ -78,36 +106,46 @@ class PlayView {
...
@@ -78,36 +106,46 @@ class PlayView {
bindSpeedBtn
();
bindSpeedBtn
();
//$(".hello-container").show
();
bindBackBtn
();
$
(
"
#exercise
"
).
show
();
bindSubmitBtn
();
// 学生特定的页面
bindContinueBtnBtn
();
$
(
"
[role='stu']
"
).
show
();
bindConfirmBtn
();
$
(
"
.hello-container
"
).
show
();
// 学生特定的页面
$
(
"
[role='stu']
"
).
show
();
}
}
if
(
this
.
data
.
video
)
{
if
(
this
.
data
.
video
)
{
$
(
"
#video
"
).
attr
(
"
src
"
,
this
.
data
.
video
);
$
(
"
.video
"
).
attr
(
"
src
"
,
this
.
data
.
video
);
const
video
=
$
(
"
#video
"
)[
0
];
const
video
=
$
(
"
#video
"
)[
0
];
let
i
=
setInterval
(()
=>
{
let
i
=
setInterval
(()
=>
{
if
(
video
.
readyState
>
0
)
{
if
(
video
.
readyState
>
0
)
{
let
totalTime
=
getTimeStr
(
video
.
duration
);
let
totalTime
=
getTimeStr
(
video
.
duration
);
$
(
"
.total-time
"
).
empty
();
$
(
"
.total-time
"
).
empty
();
$
(
"
.total-time
"
).
append
(
totalTime
);
$
(
"
.total-time
"
).
append
(
totalTime
);
}
}
},
100
);
},
100
);
}
}
}
if
(
this
.
data
.
stuImage
)
{
$
(
"
#stuimage
"
).
attr
(
"
src
"
,
this
.
data
.
stuImage
);
}
if
(
this
.
data
.
title
){
$
(
"
.title
"
).
empty
();
$
(
"
.title
"
).
append
(
this
.
data
.
title
);
}
}
}
}
// 视频播放按钮
// 视频播放按钮
...
@@ -138,37 +176,125 @@ function bindVideoPlayBtn() {
...
@@ -138,37 +176,125 @@ function bindVideoPlayBtn() {
// 录音按钮
// 录音按钮
function
bindRecorderBtn
()
{
function
bindRecorderBtn
()
{
bindPressAnimation
(
$
(
"
.recorder-play-icon
"
));
bindPressAnimation
(
$
(
"
.recorder-play-icon
"
));
$
(
"
#video
"
)[
0
].
addEventListener
(
'
ended
'
,
function
()
{
// 监听视频播放结束
$
(
"
.recorder-play-icon .recorder-pause
"
).
hide
();
$
(
"
.recorder-play-icon .control
"
).
addClass
(
"
recorder-play
"
);
stuUserAspect
.
isPause
=
true
;
if
(
started
)
{
clearInterval
(
started
);
}
});
$
(
"
.recorder-play-icon
"
).
click
(
function
()
{
$
(
"
.recorder-play-icon
"
).
click
(
function
()
{
if
(
stuUserAspect
.
firstClickRecorder
)
{
$
(
"
.recorder-tips
"
).
hide
();
stuUserAspect
.
firstClickRecorder
=
false
;
}
const
control
=
$
(
"
.recorder-play-icon .control
"
);
const
control
=
$
(
"
.recorder-play-icon .control
"
);
const
status_
=
control
.
hasClass
(
"
recorder-play
"
);
const
status_
=
control
.
hasClass
(
"
recorder-play
"
);
//开始录制
if
(
status_
)
{
if
(
status_
)
{
//隐藏按钮
$
(
"
#backBtn
"
).
hide
();
$
(
"
.back-tips
"
).
hide
();
//获取临时进度条的进度
let
tempProgressValue
=
$
(
"
#tempProgressbar
"
).
attr
(
"
data-value
"
);
let
progressValue
=
$
(
"
#progressbar
"
).
attr
(
"
data-value
"
);
let
newValue
=
parseFloat
(
progressValue
)
+
parseFloat
(
tempProgressValue
);
console
.
log
(
newValue
);
//绘制滚动条
drawProgress
(
$
(
"
#progressbar
"
),
newValue
);
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
);
control
.
removeClass
(
"
recorder-play
"
);
control
.
removeClass
(
"
recorder-play
"
);
$
(
"
.recorder-play-icon .recorder-pause
"
).
show
();
$
(
"
.recorder-play-icon .recorder-pause
"
).
show
();
//当前时间
let
startTime
=
$
(
"
#video
"
)[
0
].
currentTime
;
tempRecorder
=
{
startTime
:
startTime
,
endTime
:
startTime
}
$
(
"
#video
"
)[
0
].
play
();
stuUserAspect
.
isPause
=
false
;
//刷新进度条
refreshProgress
();
}
else
{
}
else
{
$
(
"
.recorder-play-icon .recorder-pause
"
).
hide
();
$
(
"
.recorder-play-icon .recorder-pause
"
).
hide
();
control
.
addClass
(
"
recorder-play
"
);
control
.
addClass
(
"
recorder-play
"
);
$
(
"
#video
"
)[
0
].
pause
();
let
curTime
=
$
(
"
#video
"
)[
0
].
currentTime
;
tempRecorder
.
endTime
=
curTime
;
if
(
started
)
{
clearInterval
(
started
);
}
//录完后,显示撤销按钮
if
(
stuUserAspect
.
firstClickCancel
)
{
$
(
"
.back-tips
"
).
show
();
}
$
(
"
#backBtn
"
).
show
();
$
(
"
#submitBtn
"
).
show
();
//将当前时间保存到切片中
stuUserAspect
.
curTime
=
curTime
;
stuUserAspect
.
isPause
=
true
;
stuUserAspect
.
recorderArr
.
push
(
tempRecorder
);
//保存切片
cw
.
storeAspect
(
stuUserAspect
);
}
}
});
});
}
}
// 绑定点击效果
// 绑定点击效果
function
bindPressAnimation
(
_dom
)
{
function
bindPressAnimation
(
_dom
,
cssName
=
null
)
{
let
css
=
'
press
'
;
if
(
cssName
){
css
=
cssName
;
}
_dom
.
mousedown
(
function
()
{
_dom
.
mousedown
(
function
()
{
$
(
this
).
addClass
(
"
press
"
);
$
(
this
).
addClass
(
css
);
}).
mouseup
(
function
()
{
}).
mouseup
(
function
()
{
$
(
this
).
removeClass
(
"
press
"
);
$
(
this
).
removeClass
(
css
);
}).
mouseout
(
function
()
{
}).
mouseout
(
function
()
{
$
(
this
).
removeClass
(
"
press
"
);
$
(
this
).
removeClass
(
css
);
})
})
_dom
.
on
(
"
touchstart
"
,
function
(
e
)
{
_dom
.
on
(
"
touchstart
"
,
function
(
e
)
{
e
.
preventDefault
();
e
.
preventDefault
();
$
(
this
).
addClass
(
"
press
"
);
$
(
this
).
addClass
(
css
);
}).
on
(
"
touchend
"
,
function
(
e
)
{
}).
on
(
"
touchend
"
,
function
(
e
)
{
e
.
preventDefault
();
e
.
preventDefault
();
$
(
this
).
removeClass
(
"
press
"
);
$
(
this
).
removeClass
(
css
);
})
})
}
}
...
@@ -186,7 +312,17 @@ function getTimeStr(time) {
...
@@ -186,7 +312,17 @@ function getTimeStr(time) {
return
timeStr
;
return
timeStr
;
}
}
function
bindSpeedBtn
(){
function
bindSpeedBtn
()
{
$
.
each
(
$
(
"
#exercise
"
).
find
(
"
.speed-choice
"
),
function
(
i
,
item
)
{
let
speed
=
$
(
item
).
attr
(
"
data-speed
"
);
if
(
speed
==
stuUserAspect
.
speed
)
{
$
(
item
).
addClass
(
'
speed-active
'
);
return
;
}
});
$
(
"
.speed-choice
"
).
click
(
function
()
{
$
(
"
.speed-choice
"
).
click
(
function
()
{
$
(
"
.speed-choice
"
).
removeClass
(
'
speed-active
'
);
$
(
"
.speed-choice
"
).
removeClass
(
'
speed-active
'
);
...
@@ -196,10 +332,144 @@ function bindSpeedBtn(){
...
@@ -196,10 +332,144 @@ function bindSpeedBtn(){
const
video
=
$
(
"
#video
"
)[
0
];
const
video
=
$
(
"
#video
"
)[
0
];
let
speed
=
$
(
this
).
attr
(
'
data-speed
'
);
let
speed
=
$
(
this
).
attr
(
'
data-speed
'
);
stuUserAspect
.
speed
=
speed
;
if
(
video
){
if
(
video
)
{
video
.
playbackRate
=
speed
;
video
.
playbackRate
=
speed
;
}
}
//保存切片
cw
.
storeAspect
(
stuUserAspect
);
});
});
}
}
\ No newline at end of file
function
bindSentBtn
()
{
bindPressAnimation
(
$
(
"
.sent-btn
"
));
$
(
"
.sent-btn
"
).
click
(
function
()
{
//设置已经发题
teaUserAspect
.
isSendQuestion
=
true
;
$
(
this
).
hide
();
cw
.
sendEvent
(
'
sendQuestion
'
,
teaUserAspect
);
});
}
function
initListener
()
{
cw
.
onEvent
(
'
sendQuestion
'
,
(
data
,
next
)
=>
{
if
(
ROLE
==
"
tea
"
)
{
}
else
{
stuUserAspect
.
currentWordIndex
=
data
.
currentWordIndex
;
const
bindData
=
data
.
bindData
;
$
(
"
.hello-container
"
).
hide
();
$
(
"
#exercise
"
).
show
();
}
next
();
});
}
function
bindBackBtn
()
{
const
backBtn
=
$
(
"
#backBtn
"
);
bindPressAnimation
(
backBtn
);
backBtn
.
click
(
function
()
{
if
(
stuUserAspect
.
firstClickCancel
)
{
$
(
"
.back-tips
"
).
hide
();
stuUserAspect
.
firstClickCancel
=
false
;
}
var
recorder
=
stuUserAspect
.
recorderArr
.
pop
();
if
(
recorder
)
{
const
video
=
$
(
"
#video
"
)[
0
];
//视频时间回滚
video
.
currentTime
=
recorder
.
startTime
;
$
(
"
#curTime
"
).
empty
();
$
(
"
#curTime
"
).
append
(
getTimeStr
(
video
.
currentTime
));
//重新绘画进度条
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
);
}
$
(
this
).
hide
();
})
}
function
bindSubmitBtn
(){
const
submitBtn
=
$
(
"
#submitBtn
"
);
bindPressAnimation
(
submitBtn
);
submitBtn
.
click
(
function
(){
$
(
"
#submitDialog
"
).
modal
(
'
show
'
);
});
}
/**
* 刷新进度条
*/
function
refreshProgress
()
{
started
=
setInterval
(()
=>
{
if
(
stuUserAspect
.
isPause
)
{
return
;
}
const
video
=
$
(
"
#video
"
)[
0
];
let
curTime
=
video
.
currentTime
;
let
duration
=
curTime
-
tempRecorder
.
startTime
;
$
(
"
#curTime
"
).
empty
();
$
(
"
#curTime
"
).
append
(
getTimeStr
(
curTime
))
drawProgress
(
$
(
"
#tempProgressbar
"
),
duration
);
},
100
);
}
function
drawProgress
(
progressbar
,
duration
)
{
const
video
=
$
(
"
#video
"
)[
0
];
let
totalTime
=
video
.
duration
;
let
progress
=
Math
.
floor
(
duration
/
totalTime
*
100
*
100
)
/
100
;
progressbar
.
attr
(
'
data-value
'
,
progress
);
progressbar
.
css
(
"
width
"
,
progress
+
"
%
"
);
}
/**
* 继续录制操作
*/
function
bindContinueBtnBtn
(){
const
continueBtn
=
$
(
"
#continueBtn
"
);
bindPressAnimation
(
continueBtn
,
'
submit-press
'
);
continueBtn
.
click
(
function
(){
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
})
}
/**
* 确诊提交事件
*/
function
bindConfirmBtn
(){
const
confirmBtn
=
$
(
"
#confirmBtn
"
);
bindPressAnimation
(
confirmBtn
,
'
submit-press
'
);
confirmBtn
.
click
(
function
(){
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
})
}
play/util.js
0 → 100644
View file @
995f016f
function
hideMask
(){
$
(
'
div.mask
'
).
remove
();
}
function
showMask
(){
var
str
=
''
;
str
+=
'
<div class="mask">
'
;
str
+=
'
</div>
'
;
$
(
"
body
"
).
append
(
str
);
}
\ 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