如果我有一个视频文件的URL,如何显示该URL所指向的资源是否有效并存在,然后才能显示该资源?我已经看到一些建议使用AJAX的答案,但是我只知道AJAX发送和检索一些数据,而不是获取文件状态(无论是否存在)。
例如,如果我有一个URL,例如http://www.example.com/video.mp4,该如何检查是否video.mp4存在以及是否可以检索?
http://www.example.com/video.mp4
video.mp4
您实际上并不需要ajax,只需创建一个video元素,然后查看它是否可以加载源
var video = document.createElement('video'); video.onload = function() { alert('success, it exsist'); // show video element } video.onerror = function() { alert('error, couldn\'t load'); // don't show video element } video.src = 'http://www.example.com/video.mp4';
不同的浏览器播放不同的格式,要检查文件是否可以在当前浏览器中播放,可以使用canplaythrough事件
canplaythrough
video.oncanplaythrough = function() { alert("This file can be played in the current browser"); };
如果文件在同一个域中,并且端口和协议匹配,则可以使用ajax进行HEAD请求,以查看资源是否存在,但是跨域不起作用
var http = new XMLHttpRequest(); http.open('HEAD', '/folder/video.mp4'); http.onreadystatechange = function() { if (this.readyState == this.DONE) { if (this.status != 404) { // resource exists } } }; http.send();