【Django-meeting系统】播放视频的两种方式之超链接和dplayer--20220926

背景:使用django播放视频有两种方式:超链接和dplayer

方式一:超链接(推荐)

这种方法好处是最简单,不用保存视频,网站速度快,看播放所有网址的视频。
缺点是视频与网站独立,视频无法显示在指定网页里面。
【Django-meeting系统】播放视频的两种方式之超链接和dplayer--20220926_第1张图片

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有时候不能快进、不能播放指定网址。
【Django-meeting系统】播放视频的两种方式之超链接和dplayer--20220926_第2张图片

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 %}

你可能感兴趣的:(django,django,音视频,python)