163 lines
7.0 KiB
Python
163 lines
7.0 KiB
Python
{% extends 'base.html' %}
|
||
|
||
{% block titile %}
|
||
{{ video.name }} | mtianyan慕课小站
|
||
{% endblock %}
|
||
|
||
{% load staticfiles %}
|
||
<!--crumbs start-->
|
||
{% block custom_bread %}
|
||
<section>
|
||
<div class="wp">
|
||
<div class="crumbs">
|
||
<ul>
|
||
<li><a href="{% url 'index' %}">首页</a>></li>
|
||
<li><a href="{% url 'course:list' %}">公开课程</a>></li>
|
||
<li><a href="{% url 'course:course_detail' course.id %}">{{ course.name }}</a>></li>
|
||
<li>{{ video.name }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|
||
|
||
{% block custom_css %}
|
||
<link rel="stylesheet" type="text/css" href="{% static 'css/video-js.min.css' %}">
|
||
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
|
||
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
|
||
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
|
||
<link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
|
||
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
|
||
<style>
|
||
.video-js .vjs-big-play-button{
|
||
top: 50%;
|
||
left: 50%;
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block custom_js %}
|
||
<script src="{% static 'js/video.min.js' %}" type="text/javascript"></script>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div id="main">
|
||
|
||
<div class="course-info-main clearfix w has-progress">
|
||
<div style="width:1200px;height:675px;">
|
||
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1200"
|
||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||
data-setup="{}">
|
||
<source src="{{ video.url }}" type='video/mp4'>
|
||
</video>
|
||
</div>
|
||
<div class="info-bar clearfix">
|
||
<div class="content-wrap clearfix">
|
||
<div class="content">
|
||
<div class="mod-tab-menu">
|
||
<ul class="course-menu clearfix">
|
||
<li><a class="ui-tabs-active active" id="learnOn" href="{% url 'course:course_info' course.id %}"><span>章节</span></a></li>
|
||
<li><a id="commentOn" class="" href="{% url 'course:course_comments' course.id %}"><span>评论</span></a></li>
|
||
</ul>
|
||
</div>
|
||
<div id="notice" class="clearfix">
|
||
<div class="l"> <strong>课程公告:</strong> <a href="javascript:void(0)">Spring的文档以及相关的jar文件已上传</a> </div>
|
||
</div>
|
||
|
||
<div class="mod-chapters">
|
||
{% for lesson in course.lesson_set.get_queryset %}
|
||
<div class="chapter chapter-active" >
|
||
<h3>
|
||
<strong><i class="state-expand"></i>{{ lesson.name }}</strong>
|
||
</h3>
|
||
<ul class="video">
|
||
|
||
{% for video in lesson.video_set.get_queryset %}
|
||
<li>
|
||
<a target="_blank" href='{% url 'course:video_play' video.id %}' class="J-media-item studyvideo">{{ video.name }} ({{ video.learn_times }})
|
||
<i class="study-state"></i>
|
||
</a>
|
||
</li>
|
||
{% endfor %}
|
||
|
||
</ul>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
</div>
|
||
<div class="aside r">
|
||
<div class="bd">
|
||
|
||
<div class="box mb40">
|
||
<h4>资料下载</h4>
|
||
<ul class="downlist">
|
||
{% for course_resource in course.courseresource_set.get_queryset %}
|
||
<li>
|
||
<span ><i class="aui-iconfont aui-icon-file"></i> {{ course_resource.name }}</span>
|
||
<a href="{{ MEDIA_URL }}{{ course_resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
<div class="box mb40">
|
||
<h4>讲师提示</h4>
|
||
<div class="teacher-info">
|
||
<a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">
|
||
<img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80' />
|
||
</a>
|
||
<span class="tit">
|
||
<a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">{{ course.teacher.name }}</a>
|
||
</span>
|
||
<span class="job">{{ course.teacher.work_position }}</span>
|
||
</div>
|
||
<div class="course-info-tip">
|
||
<dl class="first">
|
||
<dt>课程须知</dt>
|
||
<dd class="autowrap">{{ course.you_need_know }}</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt>老师告诉你能学到什么？</dt>
|
||
<dd class="autowrap">{{ course.teacher_tell }}</dd>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="cp-other-learned js-comp-tabs">
|
||
<div class="cp-header clearfix">
|
||
<h2 class="cp-tit l">该课的同学还学过</h2>
|
||
</div>
|
||
<div class="cp-body">
|
||
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
|
||
<!-- img 200 x 112 -->
|
||
<ul class="other-list">
|
||
|
||
{% for relate_course in relate_courses %}
|
||
<li class="curr">
|
||
<a href="{% url 'course:course_detail' relate_course.id %}" target="_blank">
|
||
<img src="{{ MEDIA_URL }}{{ relate_course.image }}" alt="{{ relate_course.name }}">
|
||
<span class="name autowrap">{{ relate_course.name }}</span>
|
||
</a>
|
||
</li>
|
||
{% endfor %}
|
||
|
||
</ul>
|
||
</div>
|
||
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
|
||
<ul class="other-list">
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div> </div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
{% endblock %} |