处理视频标签中的空流

Posted 2023-04-13

【中文标题】处理视频标签中的空流

【英文标题】：Handle null stream in video tag

【发布时间】：2017-11-21 09:27:22

【问题描述】：

我有以下 html 代码：

<video   controls="" preload="auto" autoplay="">
    <source src="http://localhost:8081/VideoStream">
    Your browser does not support HTML5 video
</video>

在 C# 服务器部分，我有以下代码：

public Stream VideoStream()

   try
   
         return File.OpenRead(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "video.ogg"));
   catch(Exception)
   
     return Stream.Null;
   

代码正在运行，但我想以某种方式在 html 中知道我收到了 Stream.Null，以便我可以显示错误消息，而不是显示不呈现任何内容的视频播放器。

您能否给我一些提示，我该如何做到这一点？

【问题讨论】：

我想在 html 中知道我收到了一个空流。

【参考方案1】：

由于Stream.Null 只是返回一个新的NullStream，它是一个长度为0 位的有效流，您只能检查流是否为空。

在 javascript 中，您可以检查视频标签的 duration 值是否等于 0。您可以在 loadedmetadata 事件中执行此操作。

<script>
    var video = $('<video   controls="" preload="auto" autoplay="">' + 
                      '<source src="http://localhost:8081/VideoStream">' +
                      'Your browser does not support HTML5 video' +
                  '</video>');

    video.on('loadedmetadata', function(evt) 
        if(evt.target.duration === 0) 
            console.log("The video is empty");
         else 
            console.log("The video has content");
        
    );
    video.on('error', function(evt) 
        console.log("The video cannot be played");
    );

    $(document.body).append(video);
</script>

loadedmetadata 事件在指定视频的元数据已加载时发生。视频的元数据包括：时长、尺寸和文本轨道。

【讨论】：

由于某种原因，该事件不会触发。我的视频元素是动态添加的，所以我使用了以下代码：$(document).on('loadedmetadata', 'video', function (evt)

@Lucian 这行不通。像这样在document 上注册loadedmetadata 事件。你需要像我在答案中描述的那样做。此外，如果您动态添加视频

相同。不会开火。如果我通过单击更改加载的元数据，它将起作用

@Lucian 我已经编辑了我的答案，以展示它如何与动态添加的视频一起使用。请注意，该事件是在元素添加到 html 之前注册的。

@Lucian 如果你使用点击事件，你总是必须click 来触发行为。 loadedmetadata 事件会自动发生