Commit b2361e8b authored by Chen Jiping's avatar Chen Jiping

feat:调整播放逻辑及样式

parent af64929f
...@@ -9,6 +9,12 @@ body { ...@@ -9,6 +9,12 @@ body {
src: url("../lib/font/cwTeXQYuan-Medium.ttf") ; src: url("../lib/font/cwTeXQYuan-Medium.ttf") ;
} }
@font-face
{
font-family: 'magic-R';
src: url("../lib/font/magic-R.ttf") ;
}
.content { .content {
position: absolute; position: absolute;
background: #f1e4c26b; background: #f1e4c26b;
...@@ -43,7 +49,7 @@ body { ...@@ -43,7 +49,7 @@ body {
.title{ .title{
object-fit: contain; object-fit: contain;
font-family: Simple-R; font-family: magic-R;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
font-stretch: normal; font-stretch: normal;
...@@ -86,26 +92,27 @@ body { ...@@ -86,26 +92,27 @@ body {
display: inline; display: inline;
position: relative; position: relative;
float: left; float: left;
border: solid 0.12rem #b17d5a;
background: #e7cc97;
border-radius: 0.2rem;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
height: 0.5rem; height: 0.5rem;
line-height: 0.4rem; line-height: 0.4rem;
width: 0.5rem; width: 0.5rem;
font-size: 0.6rem;
font-weight: bold;
box-shadow: 0rem 0.34rem 0.17rem -0.2rem #e7cc97;
margin-top: 0.15rem; margin-top: 0.15rem;
background-position: center 0;
background-size: cover;
} }
.page-bar > .disabled{ .page-bar > .last-disabled{
opacity: 0.7; opacity: 0.7;
cursor: not-allowed; cursor: not-allowed;
border-color: #e7cc97; background-image: url(../lib/images/last.png);
box-shadow: none; }
.page-bar > .next-disabled{
opacity: 0.7;
cursor: not-allowed;
background-image: url(../lib/images/next.png);
} }
...@@ -113,22 +120,23 @@ body { ...@@ -113,22 +120,23 @@ body {
display: inline; display: inline;
position: relative; position: relative;
float: left; float: left;
width: 1rem; width: 0.8rem;
height: 1rem; height: 0.8rem;
margin: 0 0.6rem 0 0.6rem; margin: 0 0.6rem 0 0.6rem;
object-fit: contain; object-fit: contain;
opacity: 0.3; opacity: 1;
border-radius: 0.2rem; background-image: url(../lib/images/pager-bg.png);
background-color: #b17d5a; background-position: center 0;
background-size: cover;
text-align: center; text-align: center;
line-height: 0.7rem; line-height: 0.4rem;
} }
.pager > span{ .pager > span{
opacity: 0.7; opacity: 0.7;
font-family: Simple-R; font-family: magic-R;
font-size: 0.7rem; font-size: 0.5rem;
font-weight: normal; font-weight: 600;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
line-height: normal; line-height: normal;
...@@ -138,10 +146,10 @@ body { ...@@ -138,10 +146,10 @@ body {
} }
.page-bar > .last{ .page-bar > .active-last{
background-image: url(../lib/images/last_active.png);
} }
.page-bar > .next{ .page-bar > .active-next{
background-image: url(../lib/images/next_active.png);
} }
\ No newline at end of file
...@@ -19,10 +19,10 @@ ...@@ -19,10 +19,10 @@
<video id="video" class="video" src="" muted></video> <video id="video" class="video" src="" muted></video>
</div> </div>
<div class="page-bar" style="position: absolute; bottom: 0.15rem; z-index: 99; left: 8.0rem;"> <div class="page-bar" style="position: absolute; bottom: 0.5rem; z-index: 99; left: 8.0rem;">
<div class="btn last disabled">&lt; </div> <div class="btn last last-disabled"></div>
<div class="pager"><span id="curPager">3</span></div> <div class="pager"><span id="curPager">3</span></div>
<div class="btn next disabled">&#62; </div> <div class="btn next next-disabled"></div>
</div> </div>
</body> </body>
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱 //对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "JMXS03"; 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 defaultData = '{"title1":"比","title2":"的基本性质","videoArr":["http://staging-teach.cdn.ireadabc.com/9c6b6bc069b10a236bb0c57fb6d30a29.mp4","http://staging-teach.cdn.ireadabc.com/f309f8dd44d59c65e44f375f818871e1.mp4","http://staging-teach.cdn.ireadabc.com/9c6b6bc069b10a236bb0c57fb6d30a29.mp4"]}';
$(function(){ $(function(){
...@@ -50,6 +50,8 @@ class PlayView { ...@@ -50,6 +50,8 @@ class PlayView {
curIndex = 0; curIndex = 0;
unlock = -1;
constructor(data) { constructor(data) {
this.data = data; this.data = data;
} }
...@@ -103,7 +105,7 @@ class PlayView { ...@@ -103,7 +105,7 @@ class PlayView {
$(".last").click(function(){ $(".last").click(function(){
if($(this).hasClass('disabled')){ if($(this).hasClass('last-disabled')){
return; return;
} }
_this.curIndex--; _this.curIndex--;
...@@ -112,7 +114,7 @@ class PlayView { ...@@ -112,7 +114,7 @@ class PlayView {
$(".next").click(function(){ $(".next").click(function(){
if($(this).hasClass('disabled')){ if($(this).hasClass('next-disabled')){
return; return;
} }
_this.curIndex++; _this.curIndex++;
...@@ -122,6 +124,8 @@ class PlayView { ...@@ -122,6 +124,8 @@ class PlayView {
showVideo(){ showVideo(){
const _this = this;
$("#curPager").empty(); $("#curPager").empty();
$("#curPager").append(this.curIndex + 1); $("#curPager").append(this.curIndex + 1);
...@@ -132,14 +136,15 @@ class PlayView { ...@@ -132,14 +136,15 @@ class PlayView {
const video = $("#video")[0]; const video = $("#video")[0];
video.play(); video.play();
//设置不可点击 _this.refreshBtnStatus();
$(".last").addClass("disabled");
$(".next").addClass("disabled");
const _this = this;
//添加播放完成事件 //添加播放完成事件
video.addEventListener('ended', function () { video.addEventListener('ended', function () {
//如果当前序号大于解锁的索引,则表示解锁了新视频
if(_this.curIndex > _this.unlock){
_this.unlock = _this.curIndex;
}
// 监听视频播放结束 // 监听视频播放结束
_this.refreshBtnStatus(); _this.refreshBtnStatus();
}); });
...@@ -149,13 +154,23 @@ class PlayView { ...@@ -149,13 +154,23 @@ class PlayView {
let length = this.data.videoArr.length; let length = this.data.videoArr.length;
$(".btn").removeClass("disabled"); $(".last").removeClass("last-disabled");
$(".last").addClass("active-last");
$(".next").removeClass("next-disabled");
$(".next").addClass("active-next");
if(this.curIndex <= 0){ if(this.curIndex <= 0){
$(".last").addClass("disabled"); $(".last").addClass("last-disabled");
$(".last").removeClass("active-last");
} }
else if(this.curIndex >= length - 1){ else if(this.curIndex >= length - 1){
$(".next").addClass("disabled"); $(".next").addClass("next-disabled");
$(".next").removeClass("active-next");
}
if(this.curIndex > this.unlock){
$(".next").addClass("next-disabled");
$(".next").removeClass("active-next");
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment