I have a video that retrieves its src from a database. The video tag is placed inside a repeater which is bound to the database. I want to hide the video if the src is not found (so it is not in DB). I tried to use Javascript for this but it's not working.

Here is the code of the video element inside the repeater:

<video controls="true" id="pVideo">
                            <source  src='<%# !String.IsNullOrEmpty(Eval("postVideo2").ToString()) ? "/uploadedVideos/" + Eval("postVideo2"): "" %>' type="video/mp4"/> 

                        </video>

This is the Javascript section in the head element:

  <script type="text/javascript">
        var v = document.getElementById("pVideo");
        v.error = function () {
            this.style.display = "none";
        }

    </script>

This doesn't work, if there is a video it displays it well, but if there is no video I got a gray box instead saying "no video with supported format and MIME type found" this happens because the src will be empty, but I want to hide this.

Can anyone please tell me how to solve this problem?

Thanks.

I have a video that retrieves its src from a database. The video tag is placed inside a repeater which is bound to the database. I want to hide the video if the src is not found (so it is not in DB). I tried to use Javascript for this but it's not working.

Here is the code of the video element inside the repeater:

<video controls="true" id="pVideo">
                            <source  src='<%# !String.IsNullOrEmpty(Eval("postVideo2").ToString()) ? "/uploadedVideos/" + Eval("postVideo2"): "" %>' type="video/mp4"/> 

                        </video>

This is the Javascript section in the head element:

  <script type="text/javascript">
        var v = document.getElementById("pVideo");
        v.error = function () {
            this.style.display = "none";
        }

    </script>

This doesn't work, if there is a video it displays it well, but if there is no video I got a gray box instead saying "no video with supported format and MIME type found" this happens because the src will be empty, but I want to hide this.

Can anyone please tell me how to solve this problem?

Thanks.

• javascript
• jquery
• html
• video

• v.onError = function() ??? – Tushar Commented Dec 12, 2015 at 10:36
• @Tushar When I searched I found that onerror is not valid for video, it's for img only. I've also tried it, and it's not working. – Dania Commented Dec 12, 2015 at 10:38
• this might help – Tushar Commented Dec 12, 2015 at 10:39
• @Tushar, thanks, but this didn't work also. – Dania Commented Dec 12, 2015 at 10:48
• <script type="text/javascript">var v = document.getElementById("pVideo"); if(v.currentSrc == "") {v.style.display = "none";}</script> – yjs Commented Dec 12, 2015 at 10:52

4 Answers 4

To detect that all child <source> elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

For example:

var videoElem = document.getElementById('pVideo');

if (!('networkState' in videoElem) {
    return;
}

var state = videoElemworkState;

if (state === 3) {
    videoElem.style.display = 'none';
}

The following states can be expected:

• 0 = NETWORK_EMPTY - audio/video has not yet been initialized
• 1 = NETWORK_IDLE - audio/video is active and has selected a resource, but is not using the network
• 2 = NETWORK_LOADING - browser is downloading data
• 3 = NETWORK_NO_SOURCE- no audio/video source found

That said, I don't see why you would defer this task to the Javascript layer of your website. Not outputting the element at all if there is no source seems to be the best way of dealing with this issue.

Try this

if($("#pVideo source").attr('src')=="")
{
   $("#pVideo").hide();
}

Updated code:

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

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

You can try onerror event

<script type="text/javascript">
    var v = document.getElementById("pVideo");
    v.onerror = function () {
        this.style.display = "none";
    }

</script>

Related events that occurs when there is some kind of disturbance to the media loading process, are:

1. onabort
2. onemptied
3. onstalled
4. onsuspend

If the src would be blank, how about simply using a css class:

video[src='']{display:none !important;}