在找不到src时隐藏视频

Question

我有一个视频从数据库中检索其src。视频标记放置在绑定到数据库的转发器内。如果找不到src，我想隐藏视频（因此它不在DB中）。我尝试使用Javascript，但它不起作用。

以下是转发器内部视频元素的代码：

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

                        </video>

这是head元素中的Javascript部分：

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

    </script>

这不起作用，如果有一个视频它显示得很好，但如果没有视频我得到一个灰色的框而不是说“没有支持格式的视频和找到的MIME类型”这种情况发生了，因为src将为空，但我想隐藏这个。

谁能告诉我如何解决这个问题？

谢谢。

Answer 1

要检测所有子<source>元素都无法加载，请检查media元素的networkState属性的值。如果这是HTMLMediaElement.NETWORK_NO_SOURCE，您知道所有源都无法加载。

例如：

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

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

var state = videoElem.networkState;

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

可以预期以下状态：

• 0 = NETWORK_EMPTY - 音频/视频尚未初始化
• 1 = NETWORK_IDLE - 音频/视频处于活动状态且已选择资源，但未使用网络
• 2 = NETWORK_LOADING - 浏览器正在下载数据
• 3 = NETWORK_NO_SOURCE-未找到音频/视频源

也就是说，我不明白为什么你会把这个任务推迟到你网站的Javascript层。如果没有源，则根本不输出元素似乎是处理此问题的最佳方法。

Answer 2

试试这个

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

更新的代码：

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

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

Answer 3

你可以尝试onerror事件

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

</script>

当媒体加载过程受到某种干扰时发生的相关事件是：

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

Answer 4

如果src为空，那么如何简单地使用css类：

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