Load poster for 404 videos

by gavinfoley

HTML

<video class="video" autoplay controls src="http://www.w3schools.com/html/mov_abbb.mp4">
  <img class="video-transcoding" src="https://demo.geteduca.com/content/images/videoencoding.png"  />
</video>

<video class="video" autoplay controls src="http://www.w3schools.com/html/mov_bbb.mp4"></video>

<video class="video" width="720" autoplay controls src="http://www.w3schools.com/html/mov_abbb.mp4"></video>

<img class="video-transcoding" src="https://demo.geteduca.com/content/images/videoencoding.png" style="display:none;" />

JavaScript

setTimeout(() => {

  const videos = document.querySelectorAll("video");
  const loadingImage = document.querySelectorAll("img.video-transcoding");

  const setVideoProcessingPoster = (videoEle) => {
    videoEle.setAttribute("poster", "https://demo.geteduca.com/content/images/videoencoding.png");
    videoEle.removeAttribute('controls');
  };

  videos.forEach((videoEle) => {

		// Check for an error in case we've already missed the error event 
    if (videoEle.error) {
     // setVideoProcessingPoster(videoEle);
    } else {
    
    }

    //videoEle.addEventListener("error", (e) => setVideoProcessingPoster(e.target));

  });

}, 2000);