一、百度云VOD点播功能
1.简介
百度 VOD (Video On Demand) 是百度云 BCE (Baidu Cloud Engine) 提供的面向音视频点播的 PaaS (Platform as a Service) 服务平台，为开发者提供音视频文件的存储、管理及播放服务。您无需了解音视频存储、转码、加密、分发、播放等技术细节，即可快速搭建安全可靠、高可定制的点播平台和应用。
.注册登录上传测试视频
-
打开百度云：
https://cloud.baidu.com/ -
可以使用已有的百度云盘账号登录
-
下载百度云APP到手机中，使用刷脸认证
-
认证成功之后，会赠送55元的VOD视频点播券
-
开通"视频点播VOD"服务
-
上传测试视频文件
image.png
image.png
二、数据库模型设计
from django.db import models
from utils.BaseModel.models import ModelBase
class Teacher(ModelBase):
name = models.CharField(max_length=150, verbose_name="讲师姓名", help_text='讲师姓名')
positional_title = models.CharField(max_length=150, verbose_name="职称", help_text='职称')
profile = models.TextField(verbose_name="简介", help_text='简介')
avatar_url = models.URLField(default="", verbose_name="头像url", help_text='头像url')
class Meta:
db_table = "tb_teachers" # 指明数据库表名
verbose_name = "讲师" # 在admin站点中显示的名称
verbose_name_plural = verbose_name # 显示的复数名称
def __str__(self):
return self.name
class CourseCategory(ModelBase):
name = models.CharField(max_length=100, verbose_name="课程分类名", help_text='课程分类名')
class Meta:
db_table = "tb_course_category" # 指明数据库表名
verbose_name = "课程分类" # 在admin站点中显示的名称
verbose_name_plural = verbose_name # 显示的复数名称
def __str__(self):
return self.name
class Course(ModelBase):
title = models.CharField(max_length=150, verbose_name="课程名", help_text='课程名')
cover_url = models.URLField(verbose_name="课程封面图URL", help_text='课程封面图URL')
video_url = models.URLField(verbose_name="课程视频URL", help_text='课程视频URL')
duration = models.FloatField(default=0.0, verbose_name="课程时长", help_text='课程时长')
profile = models.TextField(null=True, blank=True, verbose_name="课程简介", help_text='课程简介')
outline = models.TextField(null=True, blank=True, verbose_name="课程大纲", help_text='课程大纲')
teacher = models.ForeignKey(Teacher, on_delete=models.SET_NULL, null=True, blank=True)
category = models.ForeignKey(CourseCategory, on_delete=models.SET_NULL, null=True, blank=True)
class Meta:
db_table = "tb_course" # 指明数据库表名
verbose_name = "课程" # 在admin站点中显示的名称
verbose_name_plural = verbose_name # 显示的复数名称
def __str__(self):
return self.title
# 在mysql数据库中添加你们自己的测试数据(如下数据仅仅是案例，不能正常导入)
insert into tb_teachers (name, positional_title, profile, avatar_url, create_time, update_time, is_delete) values
('Youkou', 'python高级讲师', '讲师简介', '/media/youkou.jpg', now(), now(), 0),('Youkou', 'python高级讲师', '讲师简介', '/media/youkou.jpg', now(), now(), 0),('Youkou', 'python高级讲师', '讲师简介', '/media/youkou.jpg', now(), now(), 0);
insert into tb_course_category (name, create_time, update_time, is_delete) values
('python基础', now(), now(), 0),
('python高级', now(), now(), 0),
('python框架', now(), now(), 0);
insert into tb_course (title, cover_url, video_url, duration, `profile`, outline, teacher_id, category_id, create_time, update_time, is_delete) values
('你的测试视频1名称', '你的测试视频缩略图URL', '你的测试视频URL', 10.5(浮点型,不是str), '你的测试视频简介', '你的视频大纲', 1, 2, now(), now(), 0),
('你的测试视频2名称', '你的测试视频缩略图URL', '你的测试视频URL', '你的测试视频时长为浮点型', '你的测试视频简介', '你的视频大纲', 1, 2, now(), now(), 0);
三、后端功能实现
课程列表视图
# 在apps/course/views.py中定义如下类视图：
from django.shortcuts import render
from . import models
def course_list(request):
courses = models.Course.objects.only('title', 'cover_url', 'teacher__positional_title').filter(is_delete=False)
return render(request, 'course/course.html', locals())
课程详情视图
# 在apps/course/views.py中定义如下类视图：
from django.http import Http404
from django.shortcuts import render
from django.views import View
from . import models
logger = logging.getLogger('django')
class CourseDetailView(View):
"""
"""
def get(self, request, course_id):
try:
course = models.Course.objects.only('title', 'cover_url', 'video_url', 'profile', 'outline',
'teacher__name', 'teacher__avatar_url',
'teacher__positional_title', 'teacher__profile').\
select_related('teacher').filter(is_delete=False, id=course_id).first()
return render(request, 'course/course_detail.html', locals())
except models.Course.DoesNotExist as e:
logger.info("当前课程出现如下异常：\n{}".format(e))
raise Http404("此课程不存在！")
# 在apps/course/urls.py中
urlpatterns = [
path('', views.course_list, name='index'),
path('<int:course_id>/', views.CourseDetailView.as_view(), name='course_detail'),
]
四、前端功能实现
<!-- 在templates/course/course_detail.html中的main block下添加如下代码 -->
<!-- main-contain start -->
<main id="main">
<div class="w1200">
<div class="course-contain">
<div class="course-top-contain">
<h4 class="course-title">{{ course.title }}</h4>
<div class="course-other clearfix">
<div class="share-list">
<span>分享至:</span>
<i class="PyWhich py-weibo"></i>
</div>
<div class="buy-list">
<span class="price">免费</span>
</div>
</div>
</div>
<div class="course-video" id="course-video">
<span class="course-data" style="display: none;" data-video-url="{{ course.video_url }}"
data-cover-url="{{ course.cover_url }}">
</span>
</div>
<div class="course-bottom-contain">
<div class="course-detail-list">
<div class="course-item clearfix">
<h5 class="course-title">{{ course.teacher.name }}</h5>
<div class="teacher-box clearfix">
<img src="{{ course.teacher.avatar_url }}" alt="{{ course.teacher.name }}"
title="{{ course.teacher.name }}" class="teacher-avatar">
<div class="teacher-info">
<p class="teacher-name">{{ course.teacher.name }}</p>
<p class="teacher-identify">{{ course.teacher.positional_title }}</p>
</div>
</div>
<div class="item-content">
{{ course.teacher.profile }}
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">课程简介</h5>
<div class="item-content">
{{ course.profile }}
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">课程大纲</h5>
<div class="item-content">
<p>{{ course.outline }}</p>
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">帮助中心</h5>
<div class="item-content">
<p>1. 购买后的课程在线可反复观看学习，视频有效期以具体课程信息为准。 </p>
<p>2. 课程暂不支持下载观看，均为在线观看视频。 </p>
<p>3. 课程一经购买，不可转让、不可退款；仅限购买账号观看。</p>
<p>4. 如有问题请咨询客服: 400-1567-315 </p>
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">关于潭州课堂</h5>
<div class="item-content">
湖南潭州教育网络科技有限公司拥有千余人的优秀师资团队，是一家师资丰富、教育产品类别众多的在线培训公司。公司总部座落于美丽的星城长沙，2015年9月正式入驻芯城科技园目前拥有近两万平米办公面积。
在潭州学习的学员已突破1000万人次在线学员覆盖全球，包括中国、加拿大、日本、美国、韩国等诸多国家。
</div>
</div>
</div>
<div class="course-side">
<h4 class="side-title">推荐课程</h4>
</div>
</div>
</div>
</div>
</main>
<!-- main-contain end -->
{% block script %}
<script src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>
<script src="{% static 'js/course/course_detail.js' %}"></script>
{% endblock %}
/* 在static/js/course/course_detail.js中 */
$(function () {
let $course_data = $(".course-data");
let sVideoUrl = $course_data.data('video-url');
let sCoverUrl = $course_data.data('cover-url');
let player = cyberplayer("course-video").setup({
width: '100%',
height: 650,
file: sVideoUrl,
image: sCoverUrl,
autostart: false,
stretching: "uniform",
repeat: false,
volume: 100,
controls: true,
ak: '换成百度云上面，你自己的ak'
});
});
展示（仅能手动添加测试数据，后期后台管理会实现自动添加）
百度云存储视频界面.png
课堂视频列表.png
课堂视频详情.png
网友评论