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

Elegant fallback for html5 video using JS

本文关键字：视频 JS html5 使用      更新时间：2023-09-26

我有一个Django网站，用户可以上传视频给其他人播放。所有视频都编码为mp4格式。在某些情况下，浏览器不能播放这种格式(例如Firefox)，我需要编写一个优雅的备用程序。对我来说，这将是一个选择，下载视频，而不是流媒体。

看看这里的简单例子，我试图在我的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 %}

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

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

EDIT -类似这样的脏代码片段可以工作:

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);  
}
相关文章：