|
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>课程详情</title>
<link href="//res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css" rel="stylesheet" type="text/css" />
<link href="{% static 'page/css/weui.ext.css' %}?v=1" rel="stylesheet" type="text/css" />
<style>
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #efefef;
}
.video_wrapper, .video_select {
width: 100%;
background: #fff;
margin-bottom: 10px;
box-sizing: border-box;
}
.video_text, .video_select {
padding: 15px;
}
.course_video_name, .video_select_text {
font-size: 18px;
font-weight: bold;
color: #020001;
padding-bottom: 10px;
}
.course_video_desc {
font-size: 12px;
color: #999;
}
.video_select_item {
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
color: #020001;
border: 1px solid #e1e1e1;
border-radius: 5px;
margin-bottom: 15px;
}
.video_selected {
color: #ce8f8a !important;
border: 1px solid #ce8f8a;
}
</style>
</head>
<body>
<div class="container" >
<div class="video_wrapper">
<video id="video" width="100%" height="100%" autoplay controls x-webkit-airplay="true" webkit-playsinline="" playsinline="true" preload="none" poster="" src="{{ video_default.course_video_url }}" data-cursrc="1"></video>
<div class="video_text">
<div class="course_video_name">{{ video_default.course_video_name }}</div>
<div class="course_video_desc">{{ video_default.course_video_desc }}</div>
</div>
</div>
<div class="video_select">
<div class="video_select_text">选择视频</div>
{% for video in videos %}
<div id="video{{ forloop.counter }}" class="video_select_item {% ifequal forloop.counter 1 %}video_selected{% endifequal %}" data-src="{{ video.course_video_url }}">{{ video.course_video_type }}</div>
{% endfor %}
</div>
</div>
<script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script src="//cdn.bootcss.com/video.js/6.2.8/video.min.js"></script>
<script>
$(function() {
var video_count = {{ video_count }};
$('.video_select_item').click(function () {
$this = $(this);
$('.video_select_item').removeClass('video_selected');
$this.addClass('video_selected');
$('#video').attr('src', $this.attr('data-src'));
})
$('#video')[0].onended = function() {
var curscr = $(this).attr('data-cursrc');
if (curscr >= video_count) {
return
}
var next_video = $('#video' + (parseInt(curscr) + 1));
$('#video').attr('src', next_video.attr('data-src'));
$('.video_select_item').removeClass('video_selected');
next_video.addClass('video_selected');
};
});
</script>
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="{% static 'course/js/jswe-0.0.1.js' %}"></script>
<script>
V.initWxData({
imgUrl: 'http://pai.ai/static/pai2/img/paiai_96_96.png',
link: 'http://api.pai.ai/wx_oauth2?redirect_url=http://tamron.xfoto.com.cn/page/clerk',
desc: '店员授权',
title: '店员授权',
timeLine: ''
}, true);
V.hideOptionMenu();
$('#scan').click(function () {
V.scanQRCode({
needResult: 1
});
});
V.wxScanQRCodeSuccess = function (res) {
$('#code').val(V.parseScanQRCodeResultStr(res.resultStr));
}
</script>
</body>
</html>
|
