CODEWITHSUNDEEP
javascripthtml5-video
Sanjay Joshi
Sanjay Joshi

Reputation: 2066

How to check if HTML video can't be played?

All the answers available on the internet are in respect to knowing if video can be played. I have a different situation here, I need to know if video can't be played or video src is not accessible at all.

There are few events explained on this page, but none is helpful to resolve my query.

I have also tried to execute error event as follows:

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

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

Additional info: Video src could be from anywhere, any domain.

Upvotes: 1

Views: 3421

Answers (3)

guest271314
guest271314

Reputation: 1

You can use fetch() with mode set to "no-cors" to make a HEAD request to determine if the resource exists

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));

and use HTMLVideoElement.prototype.canPlayType to determine if the <video> element at the specific browser can play the media

video.canPlayType("video/webm")

Upvotes: -1

Sanjay Joshi
Sanjay Joshi

Reputation: 2066

Able to fix the situation with:

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

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

onerror event is not valid for HTML video tags so far, but attaching an event with the help of event listener had solved my issue. I'm sharing my answer too as this might be helpful for someone else out there.

Upvotes: 3

user8556290
user8556290

Reputation:

If you look on the attributes https://www.w3schools.com/tags/ref_av_dom.asp for the video tag in html5 you can see wich attributes we need to use to trigger error from there :

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

Upvotes: 1

Related Questions