【Django-meeting系统】播放视频的两种方式之超链接和dplayer--20220926
背景：使用django播放视频有两种方式：超链接和dplayer
方式一：超链接（推荐）
这种方法好处是最简单，不用保存视频，网站速度快，看播放所有网址的视频。
缺点是视频与网站独立，视频无法显示在指定网页里面。
classroom_info.html
{% extends 'base.html' %}
{% load static %}
{% block body_block %}
<div class="container">
<div class="row py-4 align-items-center">
<div class="col-lg-12 col-md-12 mt-0 table-responsive " style="background-color: #fff;">
<h2>教室简介h2>
<table class="table table-striped table-sm table-bordered text-center ">
<thead>
<tr class="" style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;">
<th scope="col">教室th>
<th scope="col">教室区域th>
<th scope="col">教室地址th>
<th scope="col">教室设备th>
<th scope="col">可容纳人数th>
<th scope="col">公开借订th>
<th scope="col">备注th>
<th scope="col">教室照片th>
tr>
thead>
{% for myclassroom in classroom_all %}
<tr class="row" valign="middle" style="color:Black;border-color:#E0E0E0;font-size:15px;">tr>
<td class="col-2"><a target="_blank" href="/classroom_query/">{{ myclassroom.classroom_name|default_if_none:'' }}a>td>
<td class="col-1">{{ myclassroom.classroom_location|default_if_none:'' }}td>
<td class="col-1">{{ myclassroom.classroom_address|default_if_none:'' }}td>
<td class="col-2">{{ myclassroom.classroom_equipment|default_if_none:'' }}td>
<td class="col-1">{{ myclassroom.classroom_person_hc|default_if_none:'' }}td>
<td class="col-1">{{ myclassroom.classroom_public|default_if_none:'' }}td>
<td class="col-2"><a target="_blank" href="{{myclassroom.classroom_remark1|default_if_none:''}}" >教室影片a>td>
<td class="" style="width:200px; height:100px">
<a target="_blank" href="{{myclassroom.classroom_photo_1.url}}" >
<img src="{{myclassroom.classroom_photo_1.url}}" alt="{{myclassroom.classroom_photo_1.url}}" width="200px" height="100px">img>
a>
td>
tr>
{% empty %}
<li>No data yet.li>
{% endfor %}
table>
div>
div>
div>
<br>
<br>
<br>
<br>
<br>
{% endblock %}
方式二：dplayer（不推荐）
这种方法好处是视频放在网站里面，可以显示在指定网页里面。
缺点是占用网站资源，而且dplayer有时候不能快进、不能播放指定网址。
classroom_info_video.html
{% extends 'base.html' %}
{% load static %}
{% block body_block %}
<div class="container">
<body>
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/DPlayer.min.css' %}">
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">关注我们h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量small>
div>
div>
div>
<div class="row">
<div class="col-12 col-lg-8">
<div class="film_focus">
<div class="film_focus_imgs_wrap main-content">
<ul class="film_focus_imgs w-85">
<li><div id="dplayer1" style="width:100%;height:349px;">div>li>
ul>
div>
div>
div>
<div class="col-12 col-lg-4">
div>
div>
div>
section>
<script src="{% static 'js\jquery.min.js' %}">script>
<script src="{% static 'js\bootstrap.bundle.js' %}">script>
<script src="{% static 'js\DPlayer.min.js' %}">script>
<script>
var dp1;
var dp2;
var dp3;
var dp4;
$(function(){
dp1=new DPlayer({
container: document.getElementById('dplayer1'),
// screenshot: true,
hotkey: true,
video:{
// url:"{% static 'images/player/test.mp4' %}",
url:"file://10.41.22.29/7.Training_WZSRPA/1.mp4",
// url: "file:///D:/%E6%88%91%E7%9A%84U%E7%9B%98-20220812/ABE-Python/4.python%E7%BD%91%E9%A1%B5%E5%89%8D%E5%90%8E%E7%AB%AF/Django%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/workspace8-meeting/classroom_management/static/images/player/test.mp4",
pic:"{% static 'images/player/p1.png' %}",
},
});
});
script>
body>
html>
div>
<br>
<br>
<br>
<br>
<br>
{% endblock %}