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

试试这个

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

更新的代码：

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

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

Answer 2

要检测所有子<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层。如果没有源，则根本不输出该元素似乎是解决此问题的最佳方法。

Answer 3

您可以尝试onerror活动

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

</script>

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

onabort
onemptied
onstalled
onsuspend

Answer 4

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

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

在找不到src时隐藏视频

4 个答案: