Javascript 如何检查HTML视频是否可以'；不能玩吗？

互联网上提供的所有答案都是关于是否可以播放视频的。我有一个不同的情况在这里，我需要知道，如果视频不能播放或视频src是不可访问的

关于这方面的解释很少，但没有一个事件对解决我的查询有帮助

我还尝试执行

error

事件，如下所示：

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

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

其他信息：

---

视频src可以来自任何地方、任何域。

如果您查看html5中视频标签的属性，您可以看到我们需要使用哪些属性来触发错误：

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

---

如果您查看html5中视频标签的属性，您可以看到我们需要使用哪些属性来触发错误：

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

---

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

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

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

---

到目前为止，

onerror

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

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

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

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

到目前为止，

onerror

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

您可以使用

fetch（）

将

模式设置为
“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.canPlayType("video/webm")

您可以使用
fetch（）
将
模式设置为
“无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.canPlayType("video/webm")

不确定是什么问题？您是否正在尝试确定特定浏览器上的
HTMLVideoElement
是否可以播放媒体资源的MIME类型？如果视频不存在、不可访问、无法通过浏览器播放等，我将尝试触发错误。请参阅，不确定是什么问题？您是否正在尝试确定特定浏览器中的
HTMLVideoElement
是否可以播放媒体资源的MIME类型？如果视频不存在、不可访问、无法通过浏览器播放等，我将尝试触发错误。请参阅，什么是“crossdomain.xml”？抱歉，我认为这是用于音频/视频shockwave flash，您需要像示例一样设置页眉。您可能需要删除此CORS注释，因为播放媒体时完全不需要它，只需要从中提取内容。在
elementWell播放媒体时不需要CORS页眉。。。我的知识不是绝对的，但在这种情况下，它一点也没有动摇。我绝对不相信w3School的资料，所以我甚至没有读过他们的文章，但你从中所说的也是我所说的，你链接到的例子正是我的观点：[只需要访问控制允许原始标题]从中提取内容[而不是播放]。是的，在画布上绘制视频并在此画布上调用toDataURL是提取媒体内容的一种方法，有多种其他方法，但没有一种方法会阻止您播放媒体。什么是“crossdomain.xml”？抱歉，这是音频/视频shockwave flash，您需要设置页面标题，如示例所示，注意。您可能需要删除此CORS备忘，因为播放媒体完全不需要它，只需要从中提取内容。在
elementWell播放媒体不需要CORS头。。。我的知识不是绝对的，但在这种情况下，它一点也没有动摇。我绝对不相信w3School的资料，所以我甚至没有读过他们的文章，但你从中所说的也是我所说的，你链接到的例子正是我的观点：[只需要访问控制允许原始标题]从中提取内容[而不是播放]。是的，在画布上绘制视频并在此画布上调用toDataURL是提取媒体内容的一种方法，有多种其他方法，但没有一种方法会阻止您播放媒体。确定。我来试试这个。感谢在跨源请求的情况下，即使MediaElement能够读取内容，它也会抛出。以
https://www.w3schools.com/html/mov_bbb.mp4
@kaido请参阅更新的帖子。在
fetch（）中包括
模式：“无COR”
options@guest271314不幸的是，“no cors”在这里没有帮助，它不会抛出，但是因为响应是不透明的，所以您总是会得到
false
@kaido，这不是问题。只要未到达
.catch（）
，资源就应该存在，这就是答案尝试达到的
fetch（）
部分。确定。我来试试这个。感谢在跨源请求的情况下，即使MediaElement能够读取内容，它也会抛出。以
https://www.w3schools.com/html/mov_bbb.mp4
@kaido请参阅更新的帖子。在
fetch（）中包括
模式：“无COR”
options@guest271314不幸的是，“no cors”在这里没有帮助，它不会抛出，但是因为响应是不透明的，所以您总是会得到
false
@kaido，这不是问题。只要未到达
.catch（）
，资源就应该存在，这就是应答尝试实现的
获取（）
部分。虽然此代码可能添加了错误处理程序，但至少在firefox上，当无法播放视频时不会调用回调。虽然此代码可能添加了错误处理程序，至少在firefox上，当视频无法播放时，不会调用回调。