django之简单的视频播放功能

一、数据库模型设计

# 在apps/course/models.py中定义如下模型：

from django.db import models

from utils.models import ModelBase

from django.db import models

# Create your models here.
from utils.BaseModel import ModelBase
class Teacher(ModelBase):
    name = models.CharField(max_length=50,verbose_name='讲师姓名')
    positional_title = models.CharField(max_length=150,verbose_name='职称')
    profile = models.TextField(verbose_name='讲师简介')
    avatar_url = models.URLField(verbose_name='头像url',default='')

    class Meta:
        db_table = 'tb_teachers'
        verbose_name = '讲师'

    def __str__(self):
        return self.name

class CourseCategory(ModelBase):
    """
    娱乐  搞笑   学习  python c++  java
    """
    name = models.CharField(max_length=80,verbose_name='课程分类')

    class Meta:
        db_table = 'tb_course_category'
        verbose_name = '课程分类'

    def __str__(self):
        return self.name


# 第三章表
class Course(ModelBase):
    title = models.CharField(max_length=80, verbose_name='课程名字')
    cover_url = models.URLField(verbose_name='课程封面url')
    video_url = models.URLField(verbose_name='视频url')
    profile = models.TextField(null=True,blank=True, verbose_name='课程简介')
    outline = models.TextField(null=True,blank=True,verbose_name='课程大纲')
    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 = '课程详情'

    def __str__(self):
        return self.title

二、百度云VOD点播功能

1、简介

　　百度 VOD (Video On Demand) 是百度云 BCE (Baidu Cloud Engine) 提供的面向音视频点播的 PaaS (Platform as a Service) 服务*台，为开发者提供音视频文件的存储、管理及播放服务。您无需了解音视频存储、转码、加密、分发、播放等技术细节，即可快速搭建安全可靠、高可定制的点播*台和应用。

2、注册登录上传测试视频

• 打开百度云：https://cloud.baidu.com/
• 可以使用已有的百度云盘账号登录下载百度云APP到手机中，使用刷脸认证
• 认证成功之后，会赠送55元的VOD视频点播券
• 开通"视频点播VOD"服务

# 在mysql数据库中添加你们自己的测试数据(如下数据仅仅是案例，不能正常导入)

insert into tb_teachers (name, positional_title, profile, avatar_url, create_time, update_time, is_delete) values
('蓝羽', 'python高级讲师', '讲师简介', '/media/c.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,`profile`, outline, teacher_id, category_id, create_time, update_time, is_delete) values
('你的测试视频1名称', '你的测试视频缩略图URL', '你的测试视频URL','你的测试视频简介', '你的视频大纲', 1, 2, now(), now(), 0),

('你的测试视频2名称', '你的测试视频缩略图URL', '你的测试视频URL', '你的测试视频简介', '你的视频大纲', 1, 1, now(), now(), 0);

三、后端功能实现

1、课程列表视图

# 在apps/course/views.py中定义如下类视图：

from django.shortcuts import render
from . import models


def demo(request):
    courses =  models.Course.objects.only('title','cover_url','teacher__positional_title').filter(is_delete=False)

    return render(request,'course/course.html',locals())

2、课程详情视图

class CourseDetail(View):
    def get(self,request,course_id):

        course = models.Course.objects.only('title','cover_url','video_url','profile','outline','teacher__name','teacher__profile','teacher__positional_title','teacher__avatar_url').select_related('teacher').filter(is_delete=False,id=course_id).first()
        if course:
            return render(request,'course/course_detail.html',locals())
        else:
            raise Http404('page not found')

# 在apps/course/urls.py中

from django.urls import path
from . import views

app_name = 'courses'
urlpatterns = [
 path('',views.demo),

path('detail/<int:course_id>/',views.CourseDetail.as_view(),name='course_detail'),

]

四、前端课程详情展示功能实现

{% extends 'base/base.html' %}

{% block link %}
  <link rel="stylesheet" href="../../static/css/course/course.css">
{% endblock %}

{% block title %}
 视频主页
{% endblock %}

{% block main %}
<main id="course-container">
        <div class="w1200">
            <ul class="course-list">

                {% for course in courses %}
                <li class="course-item">
                    <a href="{% url 'courses:course_detail' course.id %}">
                        <img class="course-img" src="{{ course.cover_url }}"
                            alt="潭州英语">
                        <div class="course-content">
                            <p class="course-info">{{ course.title }}</p>
                            <p class="course-author">{{ course.teacher.positional_title }}</p>
                            <p class="course-price free">免费</p>
                        </div>
                    </a>
                </li>
            {% endfor %}
{#                <li class="course-item">#}
{#                    <a href="https://www.shiguangkey.com/course/2432">#}
{#                        <img class="course-img" src="../../static/images/python_web.jpg"#}
{#                            alt="潭州英语">#}
{#                        <div class="course-content">#}
{#                            <p class="course-info">django 项目</p>#}
{#                            <p class="course-author">Taka(python讲师)</p>#}
{#                            <p class="course-price free">免费</p>#}
{#                        </div>#}
{#                    </a>#}
{#                </li>#}

            </ul>
        </div>
    </main>
{% endblock %}

<!-- 在templates/course/course_detail.html中的main block下添加如下代码 -->

{% extends 'base/base.html' %}

{% block title %}
    课程详情
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="../../static/css/course/course-detail.css">
{% endblock %}

{% block main %}
<!-- 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 -->
{% endblock %}

{% 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({
     '100%',
    height: 650,
    file: sVideoUrl,
    image: sCoverUrl,
    autostart: false,
    stretching: "uniform",
    repeat: false,
    volume: 100,
    controls: true,
    ak: '换成百度云上面，你自己的ak'
  });

});