使用 JS 的 html5 视频的优雅回退

Question

我有一个 Django 网站，用户可以在其中上传视频供其他人播放。所有视频仅编码为 mp4 格式。在某些浏览器无法播放这种格式的情况下（例如 Firefox），我需要编写一个优雅的回退程序。对我来说，这是一个下载视频而不是流式传输视频的选项。

查看简单 example here，我尝试在我的 Django 模板中编写后备程序，但无济于事。也许 JS 片段需要调整？

下面是我的模板代码的基本内容。有人可以帮我解决这个问题吗？提前致谢。

{% 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

一个问题可能是页面上有多个元素，但您从示例页面获取的 JS 代码仅初始化了第一个元素。

您应该使用 document.querySelectorAll('video') 并迭代每个视频元素。

编辑 - 像这个肮脏的代码片段这样的东西可以工作：

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);  
}

使用 JS 的 html5 视频的优雅回退

Elegant fallback for html5 video using JS

javascript

django

html5-video