找不到 src 时隐藏视频答案

【问题标题】：Hiding video when src is not found找不到 src 时隐藏视频
【发布时间】：2015-12-12 10:36:00
【问题描述】：

我有一个从数据库中检索其 src 的视频。视频标签放置在与数据库绑定的转发器内。如果找不到 src（所以它不在数据库中），我想隐藏视频。我尝试为此使用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 将是空的，但我想隐藏它。

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

谢谢。

【问题讨论】：

v.onError = function() ???
@Tushar 当我搜索时，我发现 onerror 对视频无效，它仅适用于 img。我也试过了，还是不行。
this 可能会有所帮助
@Tushar，谢谢，但这也不起作用。

标签： javascript jquery html video

【解决方案1】：

要检测所有子 <source> 元素都未能加载，请检查媒体元素的 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 层。如果没有来源，则根本不输出元素似乎是处理此问题的最佳方法。

【讨论】：

谢谢，但是当我将您的代码放在脚本中时，我收到“返回”错误，说它在函数之外，我删除了包含它的 if，但视频仍然没有消失。我该如何解决这个问题？
尝试使用 Web 控制台进行调试时出现此错误，“GET localhost:56620/uploadedImages/NULL”您知道此错误的原因吗？
我不确定您的最终文档是什么样的，但是将您的代码移动到外部文件并检查文档的状态可能是个好主意。例如：document.addEventListener("DOMContentLoaded", function() { // Code that checks networkState });。学习如何使用 Javascript 的最好方法就是尝试和玩耍！
谢谢，我会检查的。

【解决方案2】：

试试这个

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

更新代码：

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

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

【讨论】：

谢谢，但没用。还有其他解决方案吗？谢谢。
尝试更新代码。这也应该在视频加载之前运行。这样可以检查视频是否有来源，请尝试在警报中获取来源并查看即将发生的事情。 alert($("#pVideo source").attr('src'));
谢谢，但没有显示警报。另外，我将脚本放在正文末尾之前，以确保首先加载元素，但我仍然遇到同样的错误。
@Naveen - நவீன் 谢谢你的回答。我已经使用 C# 解决了这个问题。

【解决方案3】：

你可以试试onerror事件

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

</script>

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

中止
空了
已安装
暂停

【讨论】：

【解决方案4】：

如果 src 是空白的，那么简单地使用 css 类怎么样：

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

【讨论】：