Question

在我维护的Django网络应用中，用户可以上传其他人可以播放的视频。所有视频都编码为mp4s。在浏览器无法播放此格式的某些情况下（例如Firefox），我需要编写一个优雅的后备版本。我正在关注example here - 它很好地涵盖了所有基础。

我的Django模板由基于分类的基类ListView支持。它被传递给object_list。然后我遍历此列表并逐个显示视频。每个页面都有10个视频对象。

即，类似于以下内容（简化代码）：

    {% for vid in object_list %}

        <video width="500" height="350" controls autoplay>
        <source src="{{ vid.streaming_url }}" type='video/mp4; codecs="mp4v.20.8, samr"'>
            <a href="{{ vid.streaming_url }}">
                <img src="https://a2ua.com/404/404-005.jpg" title="Your browser does not support the <video> tag">
             </a>
        <p>This browser can't run this video</p>
        </video>

    {% endfor %}

这很简单。什么不是直截了当（对我来说）是伴随的JS，因为我不精通JS。

我正在尝试以下方法：

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

在{% endfor %}之前将放置在 forloop内。问题是它仅适用于每个页面中的最后一个视频 < / em>在此设置下。请注意，将它放在外面 forloop会产生类似的结果。我可能是错的，但我认为它没有正确考虑到分页。有人可以帮我改进吗？

Answer 1

我认为问题在于您的Javascript中的可变范围。因为一切都具有全局范围，所以它在循环的每次迭代期间都会被覆盖，并且唯一一个“粘”是循环中的最后一项。

将该逻辑移动到一个函数中可以解决您的问题：

<script>
// Define a function to apply the fallback logic to a single video element
var applyFallback = function(v){
    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);
};

var videos = document.querySelectorAll('video');
for (var i = 0; i < videos.length; i++) {
    applyFallback(videos[i]);
}
</script>

此代码应模板循环，尽可能接近HTML中的结束</body>标记。

通过JS

1 个答案: