0

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.

5
  • v.onError = function() ???
    – Tushar
    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
    Dec 12, 2015 at 10:38
  • this might help
    – Tushar
    Dec 12, 2015 at 10:39
  • @Tushar, thanks, but this didn't work also.
    – Dania
    Dec 12, 2015 at 10:48
  • <script type="text/javascript">var v = document.getElementById("pVideo"); if(v.currentSrc == "") {v.style.display = "none";}</script>
    – yjs
    Dec 12, 2015 at 10:52

4 Answers 4

3

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.

4
  • Thanks, but when I place your code inside the script, I get an error for "return" saying that it's outside the function, I removed the if that contains it, but still the video didn't disappear. How can I solve this?
    – Dania
    Dec 12, 2015 at 11:07
  • When trying to debug it using the web console I get this error, "GET localhost:56620/uploadedImages/NULL" Any idea about the cause of this error?
    – Dania
    Dec 12, 2015 at 11:13
  • I'm not sure what your final document looks like, but it's probably a good idea to move your code to an external file and check for the state of the document. For example: document.addEventListener("DOMContentLoaded", function() { // Code that checks networkState });. The best way to learn how to use Javascript is to try and play!
    – pesla
    Dec 12, 2015 at 11:15
  • Thanks I will check that.
    – Dania
    Dec 12, 2015 at 11:25
2

Try this

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

Updated code:

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

document._video.addEventListener('error',function(){
    $(document._video).hide()
});
4
  • Thanks, but it didn't work. Is there any other solution? Thank you.
    – Dania
    Dec 12, 2015 at 10:42
  • Try updated code. And also this should run before video loaded. So that this can check Video has source or not, Try get the source in alert and see whats comming. alert($("#pVideo source").attr('src')); Dec 12, 2015 at 10:46
  • Thank you, but no alert was displayed. Also, I've placed the script before the end of the body to make sure that the elements are loaded first, but I'm still getting the same error.
    – Dania
    Dec 12, 2015 at 10:55
  • @ Naveen - நவீன் thank you for your answer. I've solved the issue using C#.
    – Dania
    Dec 14, 2015 at 14:48
1

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
0
1

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

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

1
  • the best answer :)))))))))) why use js if css is super easy!!!!! works like charm! Aug 19, 2023 at 3:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.