Elegant fallback for html5 video using JS

Question

I have a Django website where users are meant to upload videos for others to playback. All videos are encoded solely as mp4 format. In certain cases where browsers can't play this format (eg Firefox), I need to program an elegant fallback. For me, that would be an option to download the video instead of streaming it.

Looking at the simple example here , I've tried to program a fallback in my Django template, but to no avail. Perhaps the JS snippet needs tweaking?

Below is what my template code basically looks like. Can someone help me vis-a-vis troubleshooting this? Thanks in advance.

{% 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 %}
    &nbsp;&nbsp;&nbsp;<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 %}

Answer 1

One problem may be that you have multiple elements on the page, but the JS code you took from the example page initializes only the first element.

You should use document.querySelectorAll('video') and iterate over each video element.

EDIT - Something like this dirty code snippet would work:

var videos = document.querySelectorAll('video');
for (var i = 0; i < videos.length; i++) {
    var v = videos[i];
    var 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);  
}