File: C:/github_repos/ho-xsj-website/templates/lesson_share_par.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{data['name']}}-家长解读版</title>
<meta name="keywords" content="新世纪教学资源,电子教材,教材培训,编委回访,基地风采,博客,论坛,教材,教案,试题,课件,论文,小学,中学" />
<meta name="description" content="服务于小学师生的综合性资源互动平台,本站收集全部教案,试题,课件,论文,计划,总结等资源,并提供网络教研指导,互动服务功能" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="https://osscdn.xsj21.com/image/favicon.ico" />
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.5.0/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.5.0/aliplayer-h5-min.js"></script>
<style>
body, p,h4,h1{
margin:0;
padding: 0;
}
html,body{
width: 100%;
/*height: 100%;*/
}
body{
background-color: #F5F8FA;
margin-bottom: 70px;
}
a {
text-decoration: none;
}
.download {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: #f5f5f5;
}
.download>div {
display: inline-block;
vertical-align: middle;
}
.download-btn {
position: absolute;
border: 1px solid #2ca1fc;
border-radius: 3px;
height: 30px;
width: 78px;
text-align: center;
right: 12px;
top: 50%;
margin-top: -15px;
background-color: #2ca1fc;
}
.download-btn a {
color: #fff;
line-height: 30px;
font-size:12px;
width: 100%;
background: none;
border: none;
}
.download .download-icon {
width: 60px;
height: 60px;
}
.download-icon img {
border-radius: 6px;
margin: 10px;
width: 40px;
height: 40px;
}
.download-title p:first-child {
line-height:20px;
font-size: 14px;
}
.download-title p:last-child {
font-size: 10px;
line-height:14px;
}
.download-title {
color:#2ca1fc;
}
.prism-player{
width: 100%;
min-height: 300px;
{% if data['len_videos'] == 0 %}
background-image: url(https://osscdn.xsj21.com/image/lesson/lesson_no_video_no_game.jpg);
{% else %}
background-color:#000;
{% endif %}
background-size: 100%;
}
.user-class {
background:#fff;
box-shadow: 0px 1px 0px 0px rgba(231,239,243,1);
line-height: 22px;
padding: 14px 16px;
font-size:16px;
color:rgba(46,49,51,1);
}
.content {
margin-top: 11px;
padding: 12px;
}
.content h1 {
font-size:16px;
color:rgba(36,44,51,1);
line-height:16px;
}
.content p {
margin-top: 12px;
font-size:14px;
color:rgba(115,122,128,1);
line-height:20px;
}
.user-class a {
display:inline-block;
background: #fff;
color: #2ca1fc;
width:84px;
font-size:16px;
line-height:32px;
border:1px solid #2ca1fc;
border-radius: 100px;
text-align :center;
}
.user-class .selected {
color:#fff;
border:1px solid #2ca1fc;
background:#2ca1fc;
}
</style>
<script>
var player;
function ajax(address,vid,callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var re = JSON.parse(xhr.responseText);
callback&&callback(vid,re.data.play_auth);
}
}
xhr.open("POST",address,true);
xhr.setRequestHeader("Content-type","application/json");
xhr.send(JSON.stringify({unit:1,aliyun_video_id:vid}));
}
function createPlayer(vid,play_auth){
player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
autoplay: false,
//播放方式二：点播用户推荐
vid : vid,
playauth : play_auth,
// cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
},function(player){
console.log('播放器创建好了。')
});
}
function endedHandle(vid,newPlayAuth)
{
player.dispose(); //销毁
var pl = document.getElementById('J_prismPlayer');
pl.innerHTML = "";
//重新创建
createPlayer(vid,newPlayAuth);
}
{% if data['len_videos'] == 2 %}
function toggle(bool){
var f = document.getElementById("first");
var s = document.getElementById("second");
if(bool){
s.classList = '';
f.classList = 'selected';
player&&ajax('/api/v1.0/teacher/guest/video/playauth',
'{{data['videos'][0]['aliyun_video_id']}}',
endedHandle
);
}else{
s.classList = 'selected';
f.classList = '';
player&&ajax('/api/v1.0/teacher/guest/video/playauth',
'{{data['videos'][1]['aliyun_video_id']}}',
endedHandle
);
}
}
{% endif %}
</script>
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<div class="user-class">
<span>{{grade_data[data['grade']]}}年级{{semester_data[data['semester']]}}</span>·<span>第{{data['unit']}}单元</span>
{% if data['len_videos'] == 2 %}
<a id="first" class="selected" href="javascript:toggle(true)">第一课时</a>
<a id="second" class="" href="javascript:toggle(false)">试一试</a>
{% endif %}
</div>
<!--<div class="content">-->
<!--<h1>课程简介</h1>-->
<!--<p>{{data['introduction']}}</p>-->
<!--</div>-->
<div class="download">
<div class="download-icon"><img src="https://osscdn.xsj21.com/image/share/appicon-pa.png" alt="新世纪"></div><div class="download-title">
<p>新世纪数学</p>
<p>改变你的教学方式</p>
</div><div class="download-btn">
<a href="https://v2.xsj21.com/download/share">立即下载</a>
</div>
</div>
<script>
var f1 = document.getElementById("J_prismPlayer");
f1.style.display = 'block';
{% if data['len_videos'] > 0 %}
window.onload=function () {
ajax('/api/v1.0/teacher/guest/video/playauth',
'{{data['videos'][0]['aliyun_video_id']}}',
createPlayer
);
}
{% endif %}
</script>
</body>
</html>