Hide a video container if video can't be loaded with Javascript/jQuery

Question

while my question may be similar to the one found at: hide video container when there's no video in database to be displayed HTML PHP, I am looking for a Javascript/jQuery solution.

Essentially the effect I need to achieve is that when the html5 <video> tag can't load the video from its src, I want the div the video tag is contained in to be hidden, preferably with a jQuery solution to this unless there's a very simple way to do this which I have over looked.

What i have so far looks similar to this:

<div id="video">
          <video controls="controls" width="320" height="240">
              <source src="published/video.mp4" type="video/mp4" />
          </video>
      </div>

Any input is greatly appreciated.

http://stackoverflow.com/questions/5181865/checking-if-a-html5-video-is-ready - use this to check if the video is loaded (maybe after some period of time w. setInterval()) and then hide it — Velimir Tchatchevsky, Sep 03 '15 at 13:05

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

You can detect <video> support with http://modernizr.com/

if (!Modernizr.video) $('#video').hide();

http://modernizr.com/docs/#video

For check if file exists on server - How do I check if file exists in jQuery or JavaScript?

edited May 23 '17 at 12:14

Community

1
1

answered Sep 03 '15 at 13:12

ryder

51
5

score 0 · Answer 2 · answered Sep 03 '15 at 13:21

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="mov_bb.mp4" type="video/mp4">
  <source src="mov_bb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of 
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
<script>
var v = document.querySelector('video'),
    sources = v.querySelectorAll('source'),
    lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
  v.parentNode.style.display = 'none';
}, false);
</script>
</body> 
</html>

Copied from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded

score 0 · Accepted Answer · answered Sep 03 '15 at 13:24

0

Here is a pure js solution:

document._video = document.getElementById("video");

document._video.addEventListener('error',function(){
   $(document._video).hide()
 });

Also you can look at the link below for other video events:

http://www.w3.org/2010/05/video/mediaevents.html

answered Sep 03 '15 at 13:24

guvenckardas

738
4
8

Thank you for this! It worked and was an ideal solution :) – TimBryanDev Sep 07 '15 at 08:44

Hide a video container if video can't be loaded with Javascript/jQuery

3 Answers3