Commit 783fa540 authored by Chen Jiping's avatar Chen Jiping

feat:播放页面完成

parent 48f83d45
......@@ -3,6 +3,139 @@ body {
background: #fff;
}
#test{
margin: 80px;
@font-face
{
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: #f1e4c26b;
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
......@@ -9,8 +9,21 @@
<link href="./index.css" rel="stylesheet" >
<script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head>
<body>
<h1 id="test"></h1>
<body class="content">
<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">&lt; </div>
<div class="pager"><span id="curPager">3</span></div>
<div class="btn next disabled">&#62; </div>
</div>
</body>
<script src="./index.js"></script>
</html>
\ No newline at end of file
/*
window.courseware.getData(callback,key); //用于获取数据
// 兼容缩放自适应
(function (doc, win) {
window.base = document.documentElement.clientWidth / 1920;
var docEl = doc.documentElement,
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);
window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调用此方法,用于隐藏遮罩层
*/
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
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(){
window.courseware.getData(function(data){
//数据加载完,才算页面加载完成
//获取数据
if(data&&data.test){
$("#test").html("Hello "+data.test);
} else{
//一般来讲,如果没有获取到数据的话,给一组默认数据,用于演示模板的展示效果,方便别人了解这个模板
$("#test").html("Hello 我是演示信息!");
}
//数据渲染完成后,添加各种交互或者动画效果
//我这里简单做一个渐入渐出效果的例子
var flag = true;
setInterval(function(){
if(flag){
$("#test").fadeIn(500);
}else{
$("#test").fadeOut(500);
}
flag = !flag;
},1000)
const playView = new PlayView(data);
playView.init();
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window.air.hideAirClassLoading(key,data);
},key);
})
\ No newline at end of file
})
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
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