在線視頻采用，視頻上傳到百度云VOD進行存儲，然后在html中調(diào)用接口進行播放，具體見幫助文檔

在線視頻播放處理和在線文檔下載處理差不多，就多一個調(diào)用百度云VOD的處理接口。

一、分析

1. 數(shù)據(jù)庫設計

1. Teacher表

   字段名	字段類型	關聯(lián)表	關聯(lián)類型	關聯(lián)操作
   id	int
   name	char
   position	char
   brief	text
   saying	char
   avatar	url
   create_time	datatime
   update_time	datatime
   is_delete	boolean

2. CourseCategory表

   字段名	字段類型	關聯(lián)表	關聯(lián)類型	關聯(lián)操作
   id	int
   name	char
   create_time	datatime
   update_time	datatime
   is_delete	boolean

3. Course表

   字段名	字段類型	關聯(lián)表	關聯(lián)類型	關聯(lián)操作
   id	int
   name	char
   time	char
   brief	text
   outline	char
   clicks	integer
   cover_url	url
   video_url	url
   teacher	ForeignKey	Teacher	ManyToOne	SET_NULL
   category	ForeignKey	CourseCategory	ManyToOne	SET_NULL
   create_time	datatime
   update_time	datatime
   is_delete	boolean

2. 視頻列表顯示

1. 業(yè)務流程
   1. 從數(shù)據(jù)庫中獲取視頻信息返回給前端
   2. 填充html
   3. 待寫：根據(jù)類型分類（功能和文章分類實現(xiàn)一樣）
2. 請求方式：GET
3. 請求地址：/course/index/
4. 請求參數(shù)：無

3. 視頻播放

1. 業(yè)務流程

   1. 接收前端傳來的視頻id
   2. 在數(shù)據(jù)庫中獲取數(shù)據(jù)
   3. 跳轉(zhuǎn)到視頻播放頁面
   4. 調(diào)用百度云VOD播放接口

2. 請求方式：GET

3. 請求地址：/course/<int:course_id>/

4. 請求參數(shù)：

   參數(shù)	類型	前端是否必須傳	描述
   course_id	int	是	路徑參數(shù)

二、視頻播放功能

1. 數(shù)據(jù)庫

course/models.py

from django.db import models
from utils.models.models import BaseModel


class Teacher(BaseModel):
    """
    create teacher model
    field:
        姓名  name        CharField
        職銜  position    CharField
        簡介  brief       TextField
        名言  saying      CharField
        頭像  avatar      URLField

    """
    name = models.CharField(max_length=20, verbose_name="姓名", help_text="姓名")
    position = models.CharField(max_length=30, verbose_name="職位", help_text="職位")
    brief = models.TextField(verbose_name="簡介", help_text="簡介")
    saying = models.CharField(max_length=150, verbose_name="個性簽名", help_text="個性簽名")
    avatar = models.URLField(default="", verbose_name="姓名", help_text="姓名")

    class Meta:
        db_table = "tb_teacher"
        verbose_name = "講師"
        verbose_name_plural = verbose_name

    def __str__(self):
        return "姓名：{}".format(self.name)


class CourseCategory(BaseModel):
    """
    create course category model
    field:
        課程名     name        CharField
    """

    name = models.CharField(max_length=30, verbose_name="課程分類名", help_text="課程分類名")

    class Meta:
        db_table = "tb_coursecategory"
        verbose_name = "課程分類"
        verbose_name_plural = verbose_name

    def __str__(self):
        return "課程分類：{}".format(self.name)


class Course(BaseModel):
    """
    create course model
    field:
        名字      name            CharField
        封面url   cover_url       URLField
        鏈接url   video_url       URLField
        時長      time            FloatField
        簡介      brief           TextField
        課程大綱   outline         TextField
        點擊量     clicks          IntegerField
        講師      teacher         ManyToOne
        類型      category        ManyToOne

    """
    name = models.CharField(max_length=150, verbose_name="課程名", help_text="課程名")
    time = models.FloatField(default=0.0, verbose_name="時長", help_text="時長")
    brief = models.TextField(verbose_name="簡介", help_text="簡介")
    outline = models.TextField(verbose_name="大綱", help_text="大綱")
    clicks = models.IntegerField(default=0, verbose_name="觀看量", help_text="觀看量")
    cover_url = models.URLField(null=True, blank=True, verbose_name="封面url", help_text="封面url")
    video_url = models.URLField(null=True, blank=True, verbose_name="視頻url", help_text="視頻url")

    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 = "課程"
        verbose_name_plural = verbose_name

    def __str__(self):
        return "課程：{}".format(self.name)

2. 視頻列表顯示

1. urls.py配置

course/urls.py

from django.urls import path

from course import views

app_name = "course"

urlpatterns = [
    path("index/", views.CourseIndexView.as_view(), name="index"),
]

2. views.py邏輯處理

course/views.py

from django.views import View
from django.shortcuts import render

from course import models


class CourseIndexView(View):
    """
    course index view
    """
    def get(self, request):
        # 獲取課程列表中需要的數(shù)據(jù)：課程標題，講師姓名，講師職位
        course_list = models.Course.objects.select_related("teacher").only("name", "teacher__name",
                                                                      "teacher__position").filter(is_delete=False)
        return render(request, 'course/course.html', locals())

3. html填充

course/course.html

<main id="course-container">
    <div class="w1200">
        <ul class="course-list">
            {% for course in course_list %}
            <li class="course-item">
                <a href="{% url 'course:course_detail' course.id %}">
                    <img class="course-img" src="{{ course.cover_url }}"
                         alt="{{ course.category.name }}">
                    <div class="course-content">
                        <p class="course-info">{{ course.name }}</p>
                        <p class="course-author">{{ course.teacher.name }}({{ course.teacher.position }})</p>
                        <p class="course-price free">免費</p>  {# 后面寫成動態(tài)的 #}
                    </div>
                </a>
            </li>
            {% endfor %}
        </ul>
    </div>
</main>

3. 視頻播放

1. urls.py配置

course/urls.py

from django.urls import path

from course import views

app_name = "course"

urlpatterns = [
    path("<int:course_id>/", views.CourseDetailView.as_view(), name="course_detail"),
]

2. views.py邏輯處理

course/views.py

from django.views import View
from django.http import Http404
from django.shortcuts import render

from course import models

class CourseDetailView(View):
    """
    course detail view

    """
    # 1. 從數(shù)據(jù)庫中獲取到需要的課程播放信息：課程名字，教師名字，教師頭像，教師簡介，教師名言，課程簡介，課程大綱，視頻url,視頻封面url

    def get(self, request, course_id):
        course_detail = models.Course.objects.select_related("teacher").only("name", "brief", "outline", "video_url",
                                                                      "cover_url","teacher__name","teacher__brief",
                                                                      "teacher__avatar","teacher__saying").filter(
            is_delete=False, id=course_id).first()

        if course_detail:
            return render(request,'course/course_detail.html', locals())
        else:
            raise Http404("課程不存在")

3. html填充

course/course_detail.html

<div class="course-video" id="course-video">  {# 百度VOD視頻接口 #}
    <span class="course-data" style="display: none;" data-video-url="{{ course_detail.video_url }}"
          data-cover-url="{{ course_detail.cover_url }}">
    </span>
</div>

<script src="https://cdn./jwplayer/latest/cyberplayer.js"></script>  {# 百度VOD視頻功能 #}
<script src="{% static 'js/course/BDVideoPlayer.js' %}"></script>  {# 接口調(diào)用 #}

4. js邏輯處理

js/course/BDVideoPlayer.js

$(function () {
    let $courseData = $(".course-data");  //百度云VOD API接口標簽
    let $videoUrl = $courseData.data('video-url');   //視頻url
    let $coverUrl = $courseData.data('cover-url');   //封面url

    let player = cyberplayer('course-video').setup({
        width: '100%',// 寬度百分比（父元素寬度要有），可以是固定寬度
        height: 650, // 高度
        file: $videoUrl,  // 視頻url
        image: $coverUrl,   // 封面url
        autostart: false,   //是否自動播放
        stretching: "uniform", //拉伸設置
        repeat: false,  // 是否重復播放
        volume: 100,    //音量大?。?-100）
        controls: true, //控制是否顯示
        ak: '自己的百度云VOD安全認真的AK',
    })
});