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视频的优雅后备

1 个答案: