CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Dania
Dania

Reputation: 1688

Hiding video when src is not found

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.

Upvotes: 0

Views: 3402

Answers (4)

ScorpionKing2k5
ScorpionKing2k5

Reputation: 2501

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

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

Upvotes: 1

Naveen - நவீன்
Naveen - நவீன்

Reputation: 411

Try this

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

Updated code:

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

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

Upvotes: 2

pesla
pesla

Reputation: 1254

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 = videoElem.networkState;

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.

Upvotes: 3

Mahmudur Rahman
Mahmudur Rahman

Reputation: 765

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

Upvotes: 1

Related Questions