JSFiddle - React, Tailwind, and code Playground

by TastyBytes

HTML

<div id="result">Setup</div>

<!-- This video is working -->
<video id="test1" src="http://www.forrentvideo.com/MP4640x360/7.1019025.mp4" height="50" width="75" controls autoplay></video>
<!-- This video does not exist - link returns 404 -->
<video id="test2" src="http://www.forrentvideo.com/MP4640x360/15.1019025.mp4" height="50" width="75" controls autoplay></video>
<!-- This video does not exist -->
<video id="test3" src="http://www.badvideo.com/MP4640x360/7.1019025.mp4" height="50" width="75" controls autoplay></video>
<!-- This video does not exist -->
<video id="test4" height="50" width="75" controls autoplay>
    <source src="http://www.badvideo.com/MP4640x360/7.1019025.mp4" type="video/mp4" />
</video>
<!-- This video does not exist -->
<video id="test5" height="50" width="75" controls autoplay>
    <source src="http://www.forrentvideo.com/MP4640x360/15.1019025.mp4" type="video/mp4" />
</video>

JavaScript

var result = document.getElementById('result');

document.getElementById('test1').addEventListener('error',function() {
    result.innerHTML += "<br />BAD VIDEO 1"; 
});

document.getElementById('test2').addEventListener('error',function() {
    result.innerHTML += "<br />BAD VIDEO 2"; 
});

document.getElementById('test3').addEventListener('error',function() {
    result.innerHTML += "<br />BAD VIDEO 3"; 
});

document.getElementById('test4').addEventListener('error',function() {
    result.innerHTML += "<br />BAD VIDEO 4"; 
});

document.getElementById('test5').addEventListener('error',function() {
    result.innerHTML += "<br />BAD VIDEO 5"; 
});

result.innerHTML = "Init";

console.log( result );