Как вы можете отобразить файл видео или изображения в шаблоне Django в зависимости от типа загружаемого файла?

Question

Я пытаюсь отобразить файл из набора внешних ключей экземпляра модели.Файл может быть как видео, так и картинкой и загружен пользователями (аналогично Instagram).Как правильно отобразить файл как <video> или <img> в зависимости от типа загруженного файла?

В настоящее время я использую теги <video> или <img> в html, чтобы показать файл, и ониоба работают, но только если файл имеет соответствующий тип.Если файл другого типа, неправильный тег будет показывать черный ящик на сайте.

{% if result.resultfile_set.all %}
    {% for resultfile in result.resultfile_set.all %}
        <video controls>
            <source src="{{ resultfile.file.url }}">
        </video>
        <img src="{{ resultfile.file.url }}" />
        <p>Caption: {{ resultfile.caption }}</p>
    {% endfor %}
{% endif %}

Ожидаемые результаты состоят в том, что если файл, который был загружен пользователем, является видеофайлом, отобразите его как таковой;или, если файл является файлом изображения, отобразите его как изображение.Вместо этого я в настоящее время могу только отображать оба типа файлов каждый раз, когда один из них отображается правильно, а другой отображается как черный ящик

Answer 1

Вы можете отправить тип носителя вместе с URL-адресом и использовать условный рендеринг для отображения подходящего носителя

{% if result.resultfile_set.all %}
    {% for resultfile in result.resultfile_set.all %}
        {% if resultfile.file.type == "video" %}
            <video controls> <source src="{{ resultfile.file.url }}"> </video>
        {% elif resultfile.file.type == "image"}
            <img src="{{ resultfile.file.url }}" />
        {% else %}
            <div> Unsupported Media Format </div>
        {% endif %}
        <p>Caption: {{ resultfile.caption }}</p>
    {% endfor %}
{% endif %}

Ваш result.resultfile_set.all будет выглядеть примерно так:

[{
    file: {
        type: "image",
        url: "example.com/foo.png"
    },
    caption : "foo"
}, 
{
    file: {
        type: "video",
        url: "example.com/bar.mp4"
    },
    caption : "bar"
}]

Answer 2

Я бы предложил проверить тип MIME ( ссылка .

. Предположим, у вас есть модель с именем Media:

class Media(models.Model):
    media = models.BinaryField(...)

    def generate_html(self):
        if mime_type(self.media) == "image":
            return <img></img>
        elif mime_type(self.media) == "video":
            return <video></video>
        else: 
            raise Exception("media type not understood")

Теперь вы можете использовать метод generate_html вваш шаблон