My Django website allows users to upload videos in mp4 format for others to watch. However, there are cases where certain browsers cannot play this format, like Firefox. In such scenarios, I want to provide a fallback option to download the video instead of streaming it.
I attempted to implement a fallback solution following a sample code, but I'm facing issues with it in my Django template. Could someone help me troubleshoot this problem? Any assistance would be greatly appreciated.
{% extends "base.html" %}
{% block content %}
<div class="margin">
<table>
{% for video in object_list %}
<tr><td>
<a name="section{{ forloop.counter }}"></a>
<a href="{% url 'videocomment_pk' video.id %}">
{{ video.caption }}
<button>
Comment
</button>
</a>
<br>
<video width="500" height="350" controls autoplay>
<source src="{{ video.url }}" type='video/mp4; codecs="mp4v.20.8, samr"'>
<a href="{{ video.url }}">
<img src="xyz.jpg" title="Your browser does not support the <video> tag">
</a>
<p>Your browser does not support the <video> tag</p>
</video>
<br>
</td></tr>
{% endfor %}
</table>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
var d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
}, false);
</script>
</div>
<br>
{% endblock %}
{% block pagination %}
{% if is_paginated %}
<div class="pagination">
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}#section0"><button>back</button></a>
{% endif %}
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}#section0"><button >forward</button></a>
{% endif %}
</div><br>
{% endif %}
{% endblock %}