Question

在我建立的Django网站中，用户可以添加视频供其他人查看和评论。并非所有用户都有支持视频播放的设备，因此对于此类边缘情况，我想允许视频下载。

为此，我首先需要检测视频是否失败。我怎样才能做到这一点？我有一个工作解决方案，但我需要解决的问题。

目前我正在我的Django模板中尝试以下内容（所有视频都使用ListView列出）。这实际上有效，但是如果我重新加载页面就会崩溃：

<script>
    var videos = document.querySelectorAll('video');
    for (var i = 0; i < videos.length; i++) {
        (function() {
            var v = videos[i];
            var s = v.querySelector('source');
                //console.log(source);
            s.addEventListener('error', function(ev) {
                var d = document.createElement('div');
                d.innerHTML = v.innerHTML;
                console.log("hello")
                console.log(v);
                v.parentNode.replaceChild(d, v);
            }, false);
        }());
    }
</script>

即。首先，我浏览HTML页面中的所有video标记，然后对于每个标记，我在里面查找source标记。接下来，我尝试向源标记添加事件侦听器，捕获错误并进行一些处理。但是，我发现如果我重新加载页面，事件监听器不会被触发。也许事件处理程序添加太晚了;即，在添加事件处理程序之前，浏览器已尝试访问视频源。有人可以帮帮我吗？提前谢谢。

Answer 1

您可以使用load window事件设置src <video>元素，Node.replaceChild()，download属性<a>元素

＆＃13;

window.onload = function() {
  var video = document.querySelector("video");
  video.addEventListener("error", function(event) {
    var a = document.createElement("a");
    a.href = this.src;
    a.innerHTML = "download media";
    a.download = ""; // set suggested file name here
    this.parentElement.replaceChild(a, this);
  });
  video.src = "media.file";
}

＆＃13;

<video controls="">
  <source src="" type="video/mp4">
</video>

＆＃13;

如果html5视频无法加载，如何在JS中添加事件侦听器

1 个答案: