Question

互联网上提供的所有答案都与知道是否可以播放视频有关。我在这里有不同的情况，我需要知道视频是否无法播放或视频src根本无法访问。

此page上解释的事件很少，但没有一个有助于解决我的问题。

我还尝试按以下方式执行error事件：

var vid = document.getElementById("myVideo");

vid.onerror = function() {
    alert("Error");
};

其他信息： 视频src可以来自任何地方，任何域。

Answer 1

如果您在html5中查看视频标记的属性https://www.w3schools.com/tags/ref_av_dom.asp，您可以看到我们需要使用哪些属性来触发错误：

var vid = document.getElementById("myVideo");
alert(vid.error.code);

Answer 2

能够通过以下方式解决问题：

var vid = document.getElementById("myVideo");

vid.addEventListener('error', function(event) {
    alert('error');
}, true);

到目前为止，

onerror事件对HTML视频代码无效，但在事件侦听器的帮助下附加事件已解决了我的问题。我也在分享我的答案，因为这可能对那里的其他人有所帮助。

Answer 3

您可以fetch()将mode设置为"no-cors"来发出HEAD请求以确定资源是否存在

fetch("/path/to/resource", {method:"HEAD", mode:"no-cors"})
.then(response => response.status)
.then(res => console.log(res))
// if we do not reach here, the resource should exist
.catch(err => console.error(err));

并使用HTMLVideoElement.prototype.canPlayType确定特定浏览器中的<video>元素是否可以播放媒体

video.canPlayType("video/webm")

如何检查HTML视频是否无法播放？

3 个答案: