[django项目] 如何在网站上实现在线视频功能?

最新推荐文章于 2024-05-18 09:52:00 发布

startoone

最新推荐文章于 2024-05-18 09:52:00 发布

阅读量3.1k

点赞数

分类专栏： django

原文链接：https://blog.csdn.net/makesomethings/article/details/100154140

版权

django 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原创

[django项目] 如何在网站上实现在线视频功能?

2019年08月30日 11:43:31 Makesths 阅读数 194 文章标签： dajngo 更多

分类专栏： django笔记

本文链接： https://blog.csdn.net/makesomethings/article/details/100154140

在线视频

I. 功能需求分析

1>分析

在线直播，或点播设计到视频的存储，转码，加密，播放很多细节，个人单独开发不现实。本项目的在线课堂选择在线播放视频的形式。实际项目中一般选择云点播或者内嵌视频网站的方式进行。本项目选择是用百度云VOD点播来实现。

2>功能

视频展示页面
视频播放详情

II. 模型设计

1>表字段分析

老师表
- 姓名
- 职称
- 简介
- 头像
课程分类表
- 名称
课程表
- 课程名称
- 封面
- 视频地址
- 时长
- 简介
- 大纲
- 老师
- 分类

2>模型定义

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

from django.db import models

from utils.models import BaseModel

class Teacher(BaseModel):
name = models.CharField(‘讲师姓名’, max_length=150, help_text=‘讲师姓名’)
title = models.CharField(‘职称’, max_length=150, help_text=‘职称’)
profile = models.TextField(‘简介’, help_text=‘简介’)
photo = models.URLField(‘头像url’, default=’’, help_text=‘头像url’)

<span class="token keyword">class</span> <span class="token class-name">Meta</span><span class="token punctuation">:</span>
    db_table <span class="token operator">=</span> <span class="token string">'tb_teachers'</span>
    verbose_name <span class="token operator">=</span> <span class="token string">'讲师'</span>
    verbose_name_plural <span class="token operator">=</span> verbose_name

<span class="token keyword">def</span> <span class="token function">__str__</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">return</span> self<span class="token punctuation">.</span>name

class CourseCategory(BaseModel):
name = models.CharField(‘课程分类名’, max_length=100, help_text=‘课程分类名’)

<span class="token keyword">class</span> <span class="token class-name">Meta</span><span class="token punctuation">:</span>
    db_table <span class="token operator">=</span> <span class="token string">'tb_course_category'</span>
    verbose_name <span class="token operator">=</span> <span class="token string">'课程分类'</span>
    verbose_name_plural <span class="token operator">=</span> verbose_name

<span class="token keyword">def</span> <span class="token function">__str__</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">return</span> self<span class="token punctuation">.</span>name

class Course(BaseModel):
title = models.CharField(‘课程名’, max_length=150, help_text=‘课程名’)
cover_url = models.URLField(‘封面url’, help_text=‘封面url’)
video_url = models.URLField(‘课程视频url’, help_text=‘课程视频url’)
duration = models.DurationField(‘课程时长’, help_text=‘课程时长’)
profile = models.TextField(‘课程简介’, null=True, blank=True, help_text=‘课程简介’)
outline = models.TextField(‘课程大纲’, null=True, blank=True, 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)

<span class="token keyword">class</span> <span class="token class-name">Meta</span><span class="token punctuation">:</span>
    db_table <span class="token operator">=</span> <span class="token string">'tb_course'</span>
    verbose_name <span class="token operator">=</span> <span class="token string">'课程'</span>
    verbose_name_plural <span class="token operator">=</span> verbose_name

<span class="token keyword">def</span> <span class="token function">__str__</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">return</span> self<span class="token punctuation">.</span>title

DurationField表示时间间隔

只要创建模板就要生成迁移

III. 百度云VOD音视频点播

1>开通百度VOD音频点播功能

打开网址, 注册登陆, 点击立即购买

如果是首次使用需要填写信息, 然后提交

提交后点击此处

切换到vod界面

如果是没有认证则先认证再开通, 首次会送55元包, 这足以供我们使用

2>添加媒资

官方使用说明

[外链图片转存失败(img-3Buw73ad-1567136321346)(在线课堂.assets/1563342650830.png)]

[外链图片转存失败(img-mNkEy4dj-1567136321347)(在线课堂.assets/upload_test_videos_2.jpg)]

[外链图片转存失败(img-XzYxuIz0-1567136321347)(在线课堂.assets/upload_test_videos_3-1563343514038.jpg)]

3>导入测试数据

# 在mysql数据库中添加自己的测试数据
INSERT INTO `tb_teachers`
(create_time, update_time, is_delete, name, title,`profile`,photo)
 VALUES
 ( '2019-08-28 14:26:05.000000', '2019-08-28 14:26:09.000000', '0', 'jax', '管理员', '本网站的主开发工程师', '/media/jax.jpg');

# 导入课程分类数据
INSERT INTO </span>tb_course_category<span class="token punctuation"> VALUES (‘1’, ‘2019-07-17 14:34:33.000000’, ‘2019-07-17 14:34:36.000000’, ‘0’, ‘python基础’);
INSERT INTO </span>tb_course_category<span class="token punctuation"> VALUES (‘2’, ‘2019-07-17 14:34:52.000000’, ‘2019-07-17 14:34:55.000000’, ‘0’, ‘python高级’);
INSERT INTO </span>tb_course_category<span class="token punctuation"> VALUES (‘3’, ‘2019-07-17 14:35:20.000000’, ‘2019-07-17 14:35:16.000000’, ‘0’, ‘python框架’);

# 导入课程数据
insert into tb_course (title, cover_url, video_url, duration, </span>profile<span class="token punctuation">, outline, teacher_id, category_id, create_time, update_time, is_delete) values
(‘你的测试视频1名称’, ‘你的测试视频缩略图URL’, ‘你的测试视频URL’, 212000000, ‘你的测试视频简介’, ‘你的视频大纲’, 1, 2, now(), now(), 0),

(‘你的测试视频2名称’, ‘你的测试视频缩略图URL’, ‘你的测试视频URL’, ‘你的测试视频时长整数表示微秒’, ‘你的测试视频简介’, ‘你的视频大纲’, 1, 2, now(), now(), 0);

IIII. 视频展示列表

1>接口设计

接口说明：

类目	说明
请求方法	GET
url定义	`/course/`
参数格式	无参数

返回结果：

文档下载页面

2>后端代码

2.1>视图

# 在course/views.py文件下创建如下视图
from django.shortcuts import render, Http404
from django.views import View

from . import models

def course_list(request):
“”"
在线课程列表
url:/course/
“”"
# 1. 拿到所有视频数据
courses = Course.objects.select_related(‘teacher’).only(
‘title’, ‘cover_url’, ‘teacher__title’, ‘teacher__name’).filter(is_delete=False)
# 用only的原因取到指定的字段, 而不是获取所有字段, 提升性能
# 2. 前端渲染
return render(request, ‘course/course.html’, context={‘courses’: courses})

2.2>路由

# 在course/urs.py中定义如下路由
from django.urls import path

from . import views

app_name = ‘course’

urlpatterns = [
path(’’, views.course_list, name=‘index’),
]

3>前端代码

3.1>html

<!-- 创建模板templates/course/course.html -->
{% extends 'base/base.html' %}
{% load static %}
{% block title %}在线课程{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/course/course.css' %}">
    <script>
        iMenuIndex = 1
    </script>
{% endblock %}
{% block main %}
    <!-- main start -->
    <main id="course-container">
        <div class="w1200">
            <ul class="course-list">
                {% for course in courses %}
                    <!-- course-item start -->
                    <li class="course-item">
                        <a href="{% url 'course:course_detail' course.id %}">
                            <img class="course-img" src="{{ course.cover_url }}"
                                 alt="{{ course.title }}">
                            <div class="course-content">
                                <p class="course-info">{{ course.title }}</p>
                                <p class="course-author">{{ course.teacher.name }} ({{ course.teacher.title }})</p>
                                <p class="course-price free">免费</p>
                                <p class="course-author">{{ course.profile }}</p>
                            </div>
                        </a>
                    </li>
                    <!-- course-item end -->
                {% endfor %}
            </ul>
        </div>
    </main>
    <!-- main end -->
{% endblock %}

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

打开网站看一看页面的渲染,

[外链图片转存失败(img-5fWTs6Z3-1567136321349)(%E5%9C%A8%E7%BA%BF%E8%AF%BE%E5%A0%82.assets/1567128181372.png)]

样式不怎么好看, 来改一下css

3.2>css

/* ==== 修改course.css如下 ====*/
/* ========== top-wrap start =========  */
#top-wrap {
    background: #fff;
    line-height: 60px;
    box-shadow: 0 4px 4px rgba(0,0,0,.1);
}
#top-wrap .top-title {
    float: left;
    font-size: 22px;
    margin-right: 140px;

}
#top-wrap .top-nav {
display: flex;
justify-content: space-between;
width: 400px;
color: #878787;
font-size: 18px;
}
#top-wrap .top-nav li.active {
color: #212121;
}
#top-wrap .top-nav li:hover {
text-shadow: 1px 1px 2px #212121;
}
/* ========== top-wrap end ========= /
/ ========== course-container start ========= /
#course-container {
flex: 1;
}
#course-container .course-list {
display: flex;
flex-flow: row wrap;
margin-bottom: 20px;
}
#course-container .course-list .course-item {
margin: 20px;
width: 260px;
height: 260px;
background: #fff;
position: relative;
/ float: left; */
}
.course-list .course-item .course-img {
width: 100%;
height: 61.8%;
}
.course-list .course-item .course-content {
padding: 0 20px;
height: 150px;
box-sizing: border-box;
}
.course-list .course-item:hover {
box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
.course-item .course-content .course-info {
font-size: 16px;
line-height: 1.5;
max-height: 50px;
overflow: hidden;
}
.course-item .course-content .course-author{
color: #848383;
font-size: 14px;
line-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.course-item .course-content .course-price {
position: absolute;
bottom: 10px;
right: 21px;
font-size: 16px;
line-height: 30px;
color: #6fa026;

}
.course-item .course-content .course-price span{
font-size: 14px;
}
.course-item .course-content .course-price.free {
color: green;
float: right;
}
/* ========== course-container end ========= */

浏览器会自动缓存样式, 将下面的Disable cache禁用即可

[外链图片转存失败(img-QQ64yxkL-1567136321350)(%E5%9C%A8%E7%BA%BF%E8%AF%BE%E5%A0%82.assets/1567128246508.png)]

修改样式之后的页面

[外链图片转存失败(img-eKDP8Rys-1567136321350)(%E5%9C%A8%E7%BA%BF%E8%AF%BE%E5%A0%82.assets/1567128339099.png)]

V. 视频播放详情页面

视频播放详情页的设计思路与文章详情如出一辙

1>接口设计

接口说明：

类目	说明
请求方法	GET
url定义	`/course/<int:course_id>/`
参数格式	路径参数

参数说明：

参数名	类型	是否必须	描述
course_id	整数	是	视频id

返回结果：

视频播放详情页面

2>后端代码

2.1>视图

# 在course/views.py文件下创建如下视图
class CourseDetailView(View):
    """
    课程详情视图
    url:/course/<int:course_id>/
    """
<span class="token keyword">def</span> <span class="token function">get</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> request<span class="token punctuation">,</span> course_id<span class="token punctuation">)</span><span class="token punctuation">:</span>
    course <span class="token operator">=</span> models<span class="token punctuation">.</span>Course<span class="token punctuation">.</span>objects<span class="token punctuation">.</span>only<span class="token punctuation">(</span><span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'cover_url'</span><span class="token punctuation">,</span> <span class="token string">'video_url'</span><span class="token punctuation">,</span> <span class="token string">'profile'</span><span class="token punctuation">,</span> <span class="token string">'outline'</span><span class="token punctuation">,</span> <span class="token string">'teacher__name'</span><span class="token punctuation">,</span>
                                        <span class="token string">'teacher__photo'</span><span class="token punctuation">,</span> <span class="token string">'teacher__title'</span><span class="token punctuation">,</span> <span class="token string">'teacher__profile'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>select_related<span class="token punctuation">(</span>
        <span class="token string">'teacher'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token builtin">filter</span><span class="token punctuation">(</span>is_delete<span class="token operator">=</span><span class="token boolean">False</span><span class="token punctuation">,</span> <span class="token builtin">id</span><span class="token operator">=</span>course_id<span class="token punctuation">)</span><span class="token punctuation">.</span>first<span class="token punctuation">(</span><span class="token punctuation">)</span>

    <span class="token keyword">if</span> course<span class="token punctuation">:</span>

        <span class="token keyword">return</span> render<span class="token punctuation">(</span>request<span class="token punctuation">,</span> <span class="token string">'course/course_detail.html'</span><span class="token punctuation">,</span> context<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'course'</span><span class="token punctuation">:</span> course<span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">else</span><span class="token punctuation">:</span>
        <span class="token keyword">return</span> Http404<span class="token punctuation">(</span><span class="token string">'此课程不存在'</span><span class="token punctuation">)</span>

2.2>路由

# 在course/urs.py中添加如下路由
path('<int:course_id>/', views.CourseDetailView.as_view(), name='course_detail')

 
 
 
 1
2

3.前端代码

3.1>html

<!-- 创建模板templates/course/course_detail.html -->
{% extends 'base/base.html' %}
{% load static %}
{% block title %}课程详情{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/course/course-detail.css' %}">
{% endblock %}
{% block main %}
    <!-- main 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">
                        <!-- 分享方式 start -->
                        <div class="share">
                            <i></i>
                            <span>分享</span>
                            <div class="share-list">
                                <div class="bshare-custom icon-medium">
                                    <div class="bsPromo bsPromo2"></div>
                                    <a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博"
                                                                                   class="bshare-sinaminiblog"></a><a
                                        title="分享到QQ好友" class="bshare-qqim" href="javascript:void(0);"></a><a
                                        title="分享到微信" class="bshare-weixin" href="javascript:void(0);"></a><a
                                        title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span
                                        class="BSHARE_COUNT bshare-share-count" style="float: none;">62.9K</span></div>
                                <script type="text/javascript" charset="utf-8"
                                        src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
                                <script type="text/javascript" charset="utf-8"
                                        src="http://static.bshare.cn/b/bshareC0.js"></script>
                            </div>
                        </div>
                        <!-- 分享方式 end -->
                    </div>
                </div>
                <!-- 视频窗口 start -->
                <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 class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token comment">&lt;!-- 视频窗口 end --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-bottom-contain<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- 视频详情 start --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-detail-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-item clearfix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>课程讲师<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>teacher-box clearfix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ course.teacher.photo }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ course.teacher.name }}<span class="token punctuation">"</span></span>
                                 <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Which<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>teacher-avatar<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>teacher-info<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>teacher-name<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ course.teacher.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>teacher-identify<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ course.teacher.title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                            {{ course.teacher.profile }}
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-item clearfix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>课程简介<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                            {{ course.profile }}
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-item clearfix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>课程大纲<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ course.outline }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- 视频详情 end --&gt;</span>
                <span class="token comment">&lt;!-- 推荐课程 start --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>course-side<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>side-title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>推荐课程<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- 推荐课程 end --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- main end --&gt;</span>

{% endblock %}
{% block script %}

<script type=“text/javascript” src=“https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js”></script>
<script src="{% static ‘js/course/course_detail.js’ %}"></script>
{% endblock %}

3.2>js

// 创建js文件 static/js/course/course.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’
});

});

3.3>css

/*== 修改course_detail.css 代码如下===*/
#main {
	flex: 1;
}

.course-contain {
width: 100%;
}

.course-contain .course-top-contain, #course-video{
width: 100%;
background: #fff;
/padding:0 20px;/
}
.course-top-contain .course-title {
font-size: 30px;
line-height: 2.5;
margin: 0 20px;
}

.course-top-contain .course-other {
line-height: 3.5;
margin: 0 20px;
}
.course-other .share {
float: left;
}
.share span {
margin-right: 8px;
}
.share i {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
margin-right: 5px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABM0lEQVQokY2Sr0tEQRSFv/dYsIiwYVFkg/deERZBbEaDiJpEBP8Ck6jYxCBuMlgNikGTIIjBIIhbBDGISUSwzIwW4wbtrmHnwWNxf5w099z7MXeYk1SrVbpJ1IrANjAKnAXvbgpdqaYegPF4Xha1hbSH2yQHZVrpCIpaCdj9p/WVxoFhUdsQtcVY94vaHhCAErAD/EboGTgoiNpYLAYiVAMmgU9gLnj3GP0ToAy8Bu8aBWArg6JmgbXg3VF+t+BdHahndQo0WvZvAFed3p6Bh8B3zvsB7kRtKj8oamOiNiFqCUAavHsHKsAmMAMMAtfAvahdiFpZ1NaBN+AFeBK1YtIuOaI2AhwD00AC9OXa+23/MXj3EbybB1ZbIIChrskJ3p0DtRb7stesLtEMQQU4Dd7d/gHKLE8gSrHhJgAAAABJRU5ErkJggg==);
}
.share .share-list{
display: none;
/width: 130px;/
position: relative;
background: #fff;
text-align: center;
line-height: 45px;
left: 8px;
/box-shadow: 0 1px 2px #ccc;/
/border: 1px solid #ddd;/
border-radius: 5px;
z-index: 1;
}
.share:hover .share-list{
display: inline-block;
}
.share-list:after{
content: “”;
border: 12px solid transparent;
border-right-color: #eee;
position: absolute;
top: 0px;
left: -25px;
}
.share-list a{
cursor: pointer;
}
.share-list a img{
vertical-align: middle;
}
.course-other .buy-list {
float: right;
}

.price {
color: #f76363;
float: right;
margin-right: 20px;
line-height: 40px;
font-size: 20px;
}

.buy-btn {
background-color: #ff8d3f;
border: none;
width: 120px;
text-align: center;
line-height: 40px;
color: #fff;
border-radius: 5px;
font-size: 16px;
float: right;
}

.course-video {
border-top: 1px solid #ddd;
height: 400px;
}

.course-bottom-contain {
width: 100%;
margin-top: 30px;
}

.curse-bottom-contain {
margin-top: 30px;
width: 100%;
}

.course-detail-list {
width: 800px;
float: left;
}

.course-detail-list .course-item {
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}

.course-item .course-title{
border-left: 6px solid #5b86db;
padding: 0 10px;
color: #202020;
font-size: 18px;
}

.course-item .teacher-box {
margin-top: 20px;
}

.teacher-box .teacher-avatar {
width: 62px;
height: 62px;
border-radius: 50%;
float: left;
}

.teacher-box .teacher-info {
float: left;
margin-left: 10px;
position: relative;
font-size: 16px;
color: #696969;
height: 62px;
width: 90%;
}

.teacher-name {
position: absolute;
left: 0;
top: 8px;
}
.teacher-identify {
position: absolute;
bottom: 8px;
left: 0;
}

.item-content {
font-size: 14px;
color: #888;
line-height: 2em;
margin-top: 20px;
}

.item-course-title {
font-size: 18px;
color: #202020;
float: left;
line-height: 40px;
}

.item-buy-list {
float: right;
margin-top: 0;
}

.course-side {
float: right;
width: 360px;
background-color: #fff;
padding: 20px;
padding-bottom: 0;
box-sizing: border-box;
}
.course-side .side-title {
font-size: 18px;
line-height: 2.4;
}

项目源码:https://gitee.com/hao4875/newssite

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-095d4a0b23.css" rel="stylesheet">
                </div>
</article>
<div class="postTime">
    <p class="article-bar-bottom"></p>
    <span>
        文章最后发布于: 2019年08月30日 11:43:31        </span>
</div>