如何正确捕获视频对象错误消息？

Question

当视频的 URL 有效时，视频会按预期播放。当该 URL 过期时，控制台会显示错误，但不会触发视频错误事件。

控制台显示 jquery .on 事件正在工作，那么这些错误事件的编码是否有问题，还是我缺少其他一些魔法？

<video id="product_video" data-able-player playsinline data-able-player preload="auto" >
    <source type="video/mp4" src="https://xxxx.yyy.com/xxx/SH/SH-001.mp4?Policy=eyJTdGF0...X1dfQ__&Signature=MsO...A__&Key-Pair-Id=xxx" />
    <track kind="captions" src="https://xxxx.yyy.com/SH-001_captions.vtt"/>
    <track kind="chapters" src="https://xxxx.yy.com/SH-001_chapters.vtt"/>
</video>


var video = $('#product_video');
video.on('loadstart', function(event) {
    console.debug('video.on.loadstart');   // This event DOES fire
});

video.on('error', function() {             // Does NOT fire
    console.debug('video.on.error');
    alert('video: uh oh');
});
video.last().on('error', function() {      // Does NOT fire
    console.debug('player.last.on.error');
    alert('player uh oh');
});

var vid = document.getElementById("product_video");
vid.onerror = function() {                 // Does NOT fire
    alert("Error! Something went wrong");
};
vid.addEventListener("error", function(e) {
    console.log("<video> error");
    console.log(e.target.error);
    // e.target would be the <video> element
    // e.target.error -- https://html.spec.whatwg.org/multipage/media.html#mediaerror
});

Answer 1

这本身似乎不是“视频”错误。通过将 ID 添加到 source 标记并添加适当的侦听器，该事件就会触发。

<video id="product_video" playsinline preload="auto" >
    <source id="video_source" type="video/mp4" src="https://...video.mp4" />
    <track kind="captions" src="https://...captions.vtt"/>
    <track kind="chapters" src="https://...chapters.vtt"/>
</video>

var video_source = $('#video_source');
$('#video_source').on('error', function() {
    console.debug('video_source.on.error');
});