1

Делаю небольшой видеохостинг на Django. Я хотел, чтобы мои видео находились в модальных окнах bootstrap. Когда я и вывожу из базы данных на страницу они отображаются нормально, но когда я вывожу их внутри модального окна, то какое бы я не открыл окно, появляется одно и тоже видео.

Вот мои модели

from django.db import models
from django.contrib.auth.models import User
from django.utils import timezone

from .validators import ValidateFileFormat


# Create your models here.


class Xvideo(models.Model):
    name = models.CharField(verbose_name='Название', max_length=30, null=False)
    description = models.TextField(verbose_name='Описание', max_length=1000)
    file = models.FileField(verbose_name='Видео', upload_to='video/', null=False, )
    video_splash_screen = models.FileField(verbose_name='Заставка к видео', upload_to='images/', null=False, default='')
    pub_date = models.DateTimeField(verbose_name='Дата публикации', default=timezone.now)

    def __str__(self):
        return self.name


class Comment(models.Model):
    user_id = models.ForeignKey(User, on_delete=models.CASCADE)
    video_id = models.ForeignKey(Xvideo, on_delete=models.CASCADE, default='')
    name = models.CharField(verbose_name="Имя", max_length=30)
    content = models.TextField(verbose_name='Комментарий', max_length=1000)
    pub_date = models.DateTimeField(verbose_name='Дата публикации', default=timezone.now)

Вот мои views

from django.shortcuts import render

from .models import Xvideo

# Create your views here.


def index(request):
    file_list = Xvideo.objects.all()
    context = {'videos': file_list}
    return render(request, 'videoHosting/index.html', context)

Вот шаблон

{% load static %}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Главная</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'videoHosting/css/style.css' %}">
</head>
<body>
<div class="wrapper">
    <header class="container-fluid bg-dark">
        <nav class="navbar navbar-expand-lg navbar-dark row">
            <div class="col-1">
                <a href="{% url 'videoHosting:index' %}">
                    <svg class="bi bi-camera-video text-white-50" width="50px" height="50px" viewBox="0 0 20 20"
                         fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M4.667 5.5c-.645 0-1.167.522-1.167 1.167v6.666c0 .645.522 1.167 1.167 1.167h6.666c.645 0 1.167-.522 1.167-1.167V6.667c0-.645-.522-1.167-1.167-1.167H4.667zM2.5 6.667C2.5 5.47 3.47 4.5 4.667 4.5h6.666c1.197 0 2.167.97 2.167 2.167v6.666c0 1.197-.97 2.167-2.167 2.167H4.667A2.167 2.167 0 012.5 13.333V6.667z"
                              clip-rule="evenodd"></path>
                        <path fill-rule="evenodd"
                              d="M13.25 7.65l2.768-1.605a.318.318 0 01.482.263v7.384c0 .228-.26.393-.482.264l-2.767-1.605-.502.865 2.767 1.605c.859.498 1.984-.095 1.984-1.129V6.308c0-1.033-1.125-1.626-1.984-1.128L12.75 6.785l.502.865z"
                              clip-rule="evenodd"></path>
                    </svg>
                </a>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedCountent"
                    aria-controls="navbarSupportedCountent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedCountent">
                <ul class="navbar-nav">
                    {% if request.user.is_authenticated %}
                        <li class="nav-item active linki">
                            <a href="{% url 'account_logout' %}"
                               class="nav-link text-center btn btn-dark a-nav">Выход</a>
                        </li>
                    {% else %}
                        <li class="nav-item active linki">
                            <a href="{% url 'account_signup' %}" class="nav-link text-center btn btn-dark a-nav">Регистрация</a>
                        </li>
                        <li class="nav-item active">
                            <a href="{% url 'account_login' %}"
                               class="nav-link text-center btn btn-dark a-nav2">Вход</a>
                        </li>
                    {% endif %}
                </ul>
                <form class="form-inline my-2 my-lg-0 search">
                    <input type="text" class="form-control mr-sm-2 btn-input" placeholder="Поиск" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0 btn-search">Найти</button>
                </form>
            </div>
        </nav>
    </header>

    <main class="container">
        <div class="main-content my-4">
            <div class="row">
                {% for video in videos %}
                    <!-- Button trigger modal -->
                    <div class="col-md-4">
                        <div class="card mb-4 box-shadow modal_cursor" data-target="#exampleModal" data-toggle="modal">
                            <span class="text-center">{{ video.name }}</span>
                            <img class="card-img-top"
                                 data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail"
                                 alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;"
                                 src="{{ video.video_splash_screen.url }}"
                                 data-holder-rendered="true">
                            <div class="card-body">
                                <div class="row d-flex justify-content-between align-items-center">
                                    <div class="btn-group col-5">
                                        <button type="button" class="btn btn-primary" data-toggle="modal"
                                                data-target="#exampleModal">
                                            Открыть
                                        </button>
                                    </div>
                                    <small class="text-muted">{{ video.pub_date }}</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">{{ video.name }}</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="video">
                                        <video class="video_elem col-sm" controls name="media">
                                            <source src="{{ video.file.url }}" type="video/mp4">
                                        </video>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="container">
                                        <p>
                                            <button class="btn btn-primary ebal" type="button" data-toggle="collapse"
                                                    data-target="#collapseExample" aria-expanded="false"
                                                    aria-controls="collapseExample">
                                                Описание
                                            </button>
                                        </p>
                                        <div class="collapse" id="collapseExample">
                                            <div class="card card-body">
                                                {{ video.description }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </main>


    <footer class="footer mt-auto py-3 justify-content-end navbar-fixed-bottom">
        <div class="container">
            <span class="text-muted">Place sticky footer content here.</span>
        </div>
    </footer>
</div>


<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
<script src="{% static 'videoHosting/js/script.js' %}"></script>
</body>
</html>
0

1 ответ 1

1

Это происходит, потому что у вас в шаблоне у всех модалок один и тот же id, поэтому по кнопке открывается всегда первый. Сделайте разные id для каждой кнопки и модалки. Например с помощью forloop:

{% for video in videos %}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#exampleModal-{{ forloop.counter }}">
    Открыть
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal-{{ forloop.counter }}" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true">
{% endfor %}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.