Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JMXS03
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
JMXS03
Commits
783fa540
Commit
783fa540
authored
Nov 20, 2021
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:播放页面完成
parent
48f83d45
Changes
6
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
316 additions
and
32 deletions
+316
-32
Aileron-Bold.ttf
lib/font/Aileron-Bold.ttf
+0
-0
DroidSansFallback.ttf
lib/font/DroidSansFallback.ttf
+0
-0
bg.png
lib/images/bg.png
+0
-0
index.css
play/index.css
+135
-2
index.html
play/index.html
+15
-2
index.js
play/index.js
+166
-28
No files found.
lib/font/Aileron-Bold.ttf
0 → 100644
View file @
783fa540
File added
lib/font/DroidSansFallback.ttf
0 → 100644
View file @
783fa540
File added
lib/images/bg.png
0 → 100644
View file @
783fa540
8.25 KB
play/index.css
View file @
783fa540
...
@@ -3,6 +3,139 @@ body {
...
@@ -3,6 +3,139 @@ body {
background
:
#fff
;
background
:
#fff
;
}
}
#test
{
@font-face
margin
:
80px
;
{
font-family
:
'DroidSansFallback'
;
src
:
url("../lib/font/DroidSansFallback.ttf")
;
}
@font-face
{
font-family
:
'Aileron-Bold'
;
src
:
url("../lib/font/Aileron-Bold.ttf")
;
}
.content
{
position
:
absolute
;
left
:
0px
;
top
:
0px
;
right
:
0px
;
bottom
:
0px
;
background
:
#f1e4c26
b
;
background-image
:
url(../lib/images/bg.png)
;
}
.top-div
{
width
:
12rem
;
height
:
6rem
;
margin
:
-7rem
-7rem
;
padding
:
0.1rem
6rem
2.7rem
2rem
;
transform
:
rotate
(
-30deg
);
background-color
:
#3e9e33
;
}
.title
{
object-fit
:
contain
;
font-family
:
DroidSansFallback
;
font-size
:
0.8rem
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
line-height
:
normal
;
letter-spacing
:
normal
;
color
:
#f6cd61
;
position
:
relative
;
}
.sub-title
{
font-size
:
0.5rem
;
color
:
#ffffff
;
}
.video-container
{
position
:
absolute
;
width
:
70%
;
height
:
60%
;
left
:
15%
;
top
:
20%
;
overflow
:
hidden
;
background
:
#fff
;
padding
:
0.3rem
;
border-radius
:
0.3rem
;
box-shadow
:
0rem
0.2rem
0.3rem
-0.1rem
#deb664
;
}
.video
{
width
:
100%
;
height
:
100%
;
}
.page-bar
{
display
:
inline-block
;
padding-left
:
0
;
margin
:
0.2rem
0
;
}
.page-bar
>
.btn
{
display
:
inline
;
position
:
relative
;
float
:
left
;
border
:
solid
0.12rem
#b17d5a
;
background
:
#e7cc97
;
border-radius
:
0.2rem
;
color
:
#fff
;
cursor
:
pointer
;
text-align
:
center
;
height
:
0.5rem
;
line-height
:
0.4rem
;
width
:
0.5rem
;
font-size
:
0.6rem
;
font-weight
:
bold
;
box-shadow
:
0rem
0.34rem
0.17rem
-0.2rem
#e7cc97
;
margin-top
:
0.15rem
;
}
.page-bar
>
.disabled
{
opacity
:
0.7
;
cursor
:
not-allowed
;
border-color
:
#e7cc97
;
box-shadow
:
none
;
}
.page-bar
>
.pager
{
display
:
inline
;
position
:
relative
;
float
:
left
;
width
:
1rem
;
height
:
1rem
;
margin
:
0
0.6rem
0
0.6rem
;
object-fit
:
contain
;
opacity
:
0.3
;
border-radius
:
0.2rem
;
background-color
:
#b17d5a
;
text-align
:
center
;
line-height
:
0.7rem
;
}
.pager
>
span
{
opacity
:
0.7
;
font-family
:
Aileron-Bold
;
font-size
:
0.7rem
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
line-height
:
normal
;
letter-spacing
:
normal
;
color
:
#fff
;
text-align
:
center
;
}
.page-bar
>
.last
{
}
.page-bar
>
.next
{
}
}
\ No newline at end of file
play/index.html
View file @
783fa540
...
@@ -9,8 +9,21 @@
...
@@ -9,8 +9,21 @@
<link
href=
"./index.css"
rel=
"stylesheet"
>
<link
href=
"./index.css"
rel=
"stylesheet"
>
<script
type=
"text/javascript"
src=
"//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"
></script>
<script
type=
"text/javascript"
src=
"//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"
></script>
</head>
</head>
<body>
<body
class=
"content"
>
<h1
id=
"test"
></h1>
<div
class=
"top-div"
></div>
<div
style=
"position: absolute; top: 0.25rem; left: 5%; z-index: 99;"
>
<div
class=
'title'
id=
'title1'
></div>
<div
class=
'title sub-title'
id=
'title2'
></div>
</div>
<div
class=
"video-container"
>
<video
id=
"video"
class=
"video"
src=
""
muted
></video>
</div>
<div
class=
"page-bar"
style=
"position: absolute; bottom: 0.1rem; z-index: 99; left: 8.6rem;"
>
<div
class=
"btn last disabled"
>
<
</div>
<div
class=
"pager"
><span
id=
"curPager"
>
3
</span></div>
<div
class=
"btn next disabled"
>
>
</div>
</div>
</body>
</body>
<script
src=
"./index.js"
></script>
<script
src=
"./index.js"
></script>
</html>
</html>
\ No newline at end of file
play/index.js
View file @
783fa540
/*
// 兼容缩放自适应
(
function
(
doc
,
win
)
{
window.courseware.getData(callback,key); //用于获取数据
window
.
base
=
document
.
documentElement
.
clientWidth
/
1920
;
var
docEl
=
doc
.
documentElement
,
window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调用此方法,用于隐藏遮罩层
resizeEvt
=
'
orientationchange
'
in
window
?
'
orientationchange
'
:
'
resize
'
,
recalc
=
function
()
{
window
.
clientWidth
=
docEl
.
clientWidth
;
window
.
clientHeight
=
docEl
.
clientHeight
;
var
aspectRatio
=
window
.
clientWidth
/
window
.
clientHeight
;
if
(
aspectRatio
>
1920
/
1080
)
{
docEl
.
style
.
fontSize
=
100
*
(
window
.
clientHeight
/
1080
)
+
'
px
'
;
window
.
base
=
100
*
(
window
.
clientHeight
/
1080
);
}
else
{
docEl
.
style
.
fontSize
=
100
*
(
window
.
clientWidth
/
1920
)
+
'
px
'
;
window
.
base
=
100
*
(
window
.
clientWidth
/
1920
);
// 判断是否为移动设备,提示旋转屏幕
}
};
recalc
();
win
.
addEventListener
(
resizeEvt
,
recalc
,
false
);
doc
.
addEventListener
(
'
DOMContentLoaded
'
,
recalc
,
false
);
})(
document
,
window
);
*/
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var
key
=
"
JMXS03
"
;
var
defaultData
=
'
{"title1":"比","title2":"的基本性质","videoArr":["http://staging-teach.cdn.ireadabc.com/9c6b6bc069b10a236bb0c57fb6d30a29.mp4","http://staging-teach.cdn.ireadabc.com/f309f8dd44d59c65e44f375f818871e1.mp4"]}
'
;
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var
key
=
"
h5_test
"
;
$
(
function
(){
$
(
function
(){
window
.
courseware
.
getData
(
function
(
data
){
window
.
courseware
.
getData
(
function
(
data
){
//数据加载完,才算页面加载完成
//数据加载完,才算页面加载完成
//获取数据
if
(
data
&&
data
.
test
){
const
playView
=
new
PlayView
(
data
);
$
(
"
#test
"
).
html
(
"
Hello
"
+
data
.
test
);
}
else
{
playView
.
init
();
//一般来讲,如果没有获取到数据的话,给一组默认数据,用于演示模板的展示效果,方便别人了解这个模板
$
(
"
#test
"
).
html
(
"
Hello 我是演示信息!
"
);
}
//数据渲染完成后,添加各种交互或者动画效果
//我这里简单做一个渐入渐出效果的例子
var
flag
=
true
;
setInterval
(
function
(){
if
(
flag
){
$
(
"
#test
"
).
fadeIn
(
500
);
}
else
{
$
(
"
#test
"
).
fadeOut
(
500
);
}
flag
=
!
flag
;
},
1000
)
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window
.
air
.
hideAirClassLoading
(
key
,
data
);
window
.
air
.
hideAirClassLoading
(
key
,
data
);
...
@@ -41,3 +43,139 @@ $(function(){
...
@@ -41,3 +43,139 @@ $(function(){
},
key
);
},
key
);
})
})
class
PlayView
{
data
;
curIndex
=
0
;
constructor
(
data
)
{
this
.
data
=
data
;
}
init
()
{
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this
.
initDefaultData
();
this
.
initData
();
this
.
initView
();
}
initDefaultData
()
{
if
(
!
this
.
data
)
{
this
.
data
=
JSON
.
parse
(
defaultData
);
}
console
.
log
(
this
.
data
);
}
initData
()
{
}
initView
()
{
const
_this
=
this
;
if
(
this
.
data
.
title1
)
{
$
(
"
#title1
"
).
empty
();
$
(
"
#title1
"
).
append
(
this
.
data
.
title1
);
}
if
(
this
.
data
.
title2
)
{
$
(
"
#title2
"
).
empty
();
$
(
"
#title2
"
).
append
(
this
.
data
.
title2
);
}
if
(
this
.
data
.
videoArr
){
_this
.
curIndex
=
0
;
this
.
showVideo
(
0
);
}
$
(
"
.last
"
).
click
(
function
(){
if
(
$
(
this
).
hasClass
(
'
disabled
'
)){
return
;
}
_this
.
curIndex
--
;
_this
.
showVideo
();
})
$
(
"
.next
"
).
click
(
function
(){
if
(
$
(
this
).
hasClass
(
'
disabled
'
)){
return
;
}
_this
.
curIndex
++
;
_this
.
showVideo
();
})
}
showVideo
(){
$
(
"
#curPager
"
).
empty
();
$
(
"
#curPager
"
).
append
(
this
.
curIndex
+
1
);
const
videoArr
=
this
.
data
.
videoArr
;
$
(
"
#video
"
).
attr
(
'
src
'
,
videoArr
[
this
.
curIndex
])
;
const
video
=
$
(
"
#video
"
)[
0
];
video
.
play
();
//设置不可点击
$
(
"
.last
"
).
addClass
(
"
disabled
"
);
$
(
"
.next
"
).
addClass
(
"
disabled
"
);
const
_this
=
this
;
//添加播放完成事件
video
.
addEventListener
(
'
ended
'
,
function
()
{
// 监听视频播放结束
_this
.
refreshBtnStatus
();
});
}
refreshBtnStatus
(){
let
length
=
this
.
data
.
videoArr
.
length
;
$
(
"
.btn
"
).
removeClass
(
"
disabled
"
);
if
(
this
.
curIndex
<=
0
){
$
(
"
.last
"
).
addClass
(
"
disabled
"
);
}
else
if
(
this
.
curIndex
>=
length
-
1
){
$
(
"
.next
"
).
addClass
(
"
disabled
"
);
}
}
}
function
changeFontSize
(
_dom
){
const
txtLen
=
_dom
.
width
();
console
.
log
(
"
text length:
"
,
txtLen
);
if
(
txtLen
<
520
){
_dom
.
css
(
"
font-size
"
,
"
0.7rem
"
);
}
else
if
(
txtLen
<
600
)
{
_dom
.
css
(
"
font-size
"
,
"
0.60rem
"
);
}
else
if
(
txtLen
<
700
)
{
_dom
.
css
(
"
font-size
"
,
"
0.55rem
"
);
}
else
if
(
txtLen
<
800
)
{
_dom
.
css
(
"
font-size
"
,
"
0.50rem
"
);
}
else
{
_dom
.
css
(
"
font-size
"
,
"
0.45rem
"
);
}
}
\ 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