neon-jungle / wagtail-videos

Videos for Wagtail CMS, including transcoding
BSD 3-Clause "New" or "Revised" License
65 stars 57 forks source link

More control over the video tag #66

Closed jkevingutierrez closed 3 years ago

jkevingutierrez commented 3 years ago

It would be great to have the ability to store the result of the video tag in some variable.

Something similar to the images:

{% image page.photo width-400 as tmp_photo %}

https://docs.wagtail.io/en/stable/topics/images.html#more-control-over-the-img-tag

Resulting in

{% video page.video as tmp_video %}

That object should have some properties like:

That way, it could be used as

<video
    width="{{ width }}"
    height="{{ height }}"
    {% if tmp_video.thumbnail %}poster="{{ tmp_video.thumbnail.url }}"{% endif %}>
    {% for transcode in tmp_video.transcodes %}
        <source data-src={{ transcode.url }} type="{% transcode.media_format.name %}" />
    {% endfor %}
    <source data-src={{ tmp_video.url }} type="{% tmp_video.content_type %}" />
    {% trans 'Your browser does not support the video tag.' %}
    {% for track in tmp_video.tracks %}
        {{ track.track_tag }}
    {% endfor %}
</video>

There are some cases where adding some extra properties to the source tags (ex for lazy loading) makes senses. Having a variable with all the video information would be great in those cases.

seb-b commented 3 years ago

The video_tag method doesn't really do that much, so I can see this might be useful but you could achieve the same with using the Video object directly. It's useful with images because the renditions are generated using the image tag and you can access the generated url, but the video tag is just for putting all the bits together conveniently, you could still access the all the same way by doing something like:

{% with temp_video = page.video %}
... example code from above ...
{% endwith %}
jkevingutierrez commented 3 years ago

Correct, thats a good alternative. That's why I added some properties/methods in https://github.com/neon-jungle/wagtailvideos/pull/62 and https://github.com/neon-jungle/wagtailvideos/pull/63