File: C:/github_repos/ho-xsj-website/templates/live_share.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{data['title']}}</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="stylesheet" href="//g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css"/>
{% if data['aliyun_video_id'] %}
<script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.4.0/aliplayer-min.js"></script>
<link rel="shortcut icon" href="https://osscdn.xsj21.com/image/favicon.ico" />
{% endif %}
<style>
body, p{
margin:0;
padding: 0;
}
html,body{
width: 100%;
/*height: 100%;*/
}
body{
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;
}
/*.content-container{
padding: 12px;
}*/
video {
min-height: 210px;
background-color: #000;
}
.user {
padding: 8px 12px;
box-shadow: 0px 0.5px 0px 0px rgba(230,230,230,1) ;
}
.user img {
width:32px;
height:32px;
border-radius: 20px;
vertical-align: middle;
}
.user img,.user span{
vertical-align: middle;
}
.user span {
margin-left: 10px;
color:#333;
font-size: 16px;
line-height:32px;
font-weight: 600;
}
.content {
padding:12px;
}
.content h1{
margin: 8px 0;
font-size:16px;
color:#4D4D4D;
line-height:16px;
}
.content p{
font-size:14px;
color:#666;
line-height:14px;
}
.content h1:not(:first-child){
margin-top:25px;
}
.appointment {
min-height: 210px;
background-image: url({{data['image']}});
background-color: #000;
background-size: 100%;
text-align: center;
}
.appointment a{
background:rgba(0,170,255,1);
border-radius: 4px ;
font-size:18px;
color:#fff;
line-height:34px;
display: inline-block;
width: 105px;
height: 34px;
margin-top: 87px;
}
.appointment p {
margin-top: 10px;
color: #fff;
}
</style>
</head>
<body>
<div id="J_prismPlayer" class="prism-player"></div>
<!--<video src={{data['play_url']}} ></video>-->
<!--没有视频 -->
{% if not data['aliyun_video_id'] %}
<div class="appointment" >
<div>
<a href="#">预约直播</a>
<p>{{ time_to_start_end(data['start_time'], data['expire_time'])}}</p>
</div>
</div>
{% endif %}
<!--没有视频 -->
<div class="user">
<img src={{data['teacher_avatar']}} alt="头像">
<span>{{data['teacher_name']}}</span>
</div>
<div class="content">
{# |safe 是让jinja2不自动转译 #}
{{data['introduction']|safe}}
</div>
<div class="download">
<div class="download-icon"><img src="https://osscdn.xsj21.com/image/share/appicon-te.png" alt="新世纪"></div><div class="download-title">
<p>新世纪数学</p>
<p>改变你的教学方式</p>
</div><div class="download-btn">
<a href="https://v2.xsj21.com/">立即下载</a>
</div>
</div>
{% if data['aliyun_video_id'] %}
<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('播放器创建好了。')
});
}
window.onload=function () {
ajax('/api/v1.0/teacher/guest/video/playauth',
'{{data['aliyun_video_id']}}',
createPlayer
);
}
</script>
{% endif %}
</body>
</html>