如何检测嵌入在 WordPress 中的 MUX 视频是流式传输还是播放固定长度的视频？答案

【问题标题】：how to detect if MUX video embedded in WordPress is streaming or playback of a fixed length video?如何检测嵌入在 WordPress 中的 MUX 视频是流式传输还是播放固定长度的视频？
【发布时间】：2021-10-25 02:36:59
【问题描述】：

我在这里搜索并找到了一些非常古老的答案，但我认为这个问题尚未得到解答。我在 Wordpress 中使用 MediaCloud 插件来显示视频。当我创建一个页面时，我可以通过在我的 HTML 标记中包含这个短标签来显示视频：

<div id="my_video">
[mux_video id='2926' autoplay='false' loop='false' muted='false' controls='true' inline='false' preload='metadata']
</div>

Wordpress 将在内部数据库中查询媒体 id=2926 并最终呈现此 HTML 标记以显示视频（为隐私而更改 URL）：

<div id="my_video">
  <figure>
    <video class='mux-player video-js'  width=1920 height=1080 poster='https://www.example.com/wp-content/uploads/2021/08/2926--thumb.jpg' controls preload='metadata'>
      <source src='https://stream.mux.com/<-LONG-ENCODED-ID-HERE>.m3u8' type='application/x-mpegURL' />
    </video>
  </figure>
</div>

我的 MediaCloud 配置使用 videojs 来显示视频，但我无法在 the docs 中找到任何有用的功能，它可以告诉我有问题的视频是直播还是以前播放的直播或上传的视频固定的持续时间（大概是渐进式下载？）。看起来很明显，页面中运行的 JS 可以分辨出区别，因为直播明显有 LIVE 指示器可见并且时间线指示器/洗涤器被移除，而旧视频将具有时间线指示器/洗涤器并显示视频的固定长度。

一开始我以为我可能会嗅探节目数据时间 (PDT)，而这对于预录制的内容可能不存在，但 MUX 还为旧直播提供 PDT。此代码将输出当前正在播放的视频的 PDT，但不能用于区分直播和旧视频：

const video1 = document.querySelector("#my_video video");
let player1 = videojs(video1);
window.player1 = player1;
player1.on('loadeddata', () => {
        let metadataTrack = Array.prototype.find.call(player1.textTracks(), track => track.label === 'segment-metadata');
        metadataTrack.on('cuechange', () => {
                let pdt = metadataTrack.activeCues[0].value.dateTimeString;
                document.getElementById('pdt_1').innerHTML = pdt;
        });
});

我还尝试检查视频的持续时间，看看这是否有助于我区分 - 我认为直播可能有一些空的持续时间值，但事实并非如此。到目前为止，当我这样做时，它总是向我显示一些正整数值：

video1.addEventListener('loadedmetadata', (event) => {
  // duration and dimensions of video are now known
  let dur = Math.round(video1.duration);
  console.log(dur)
});

是否有一些简单的 JS 可以用来返回一个真/假值，指示有问题的视频是直播还是固定时长的旧视频？有人建议查询 MUX API，但在这种情况下这对我不起作用，并且会缩短我的页面加载时间。

【问题讨论】：

标签： javascript wordpress video.js live-streaming

【解决方案1】：

player.duration() 是 Infinity 用于直播。实时指示器会检查 durationchange 事件。

【讨论】：

正如您从我的原始帖子中看到的，我已经在加载的元数据事件侦听器中检查了视频元素的持续时间。您是否建议我改为检查 videojs player.duration() 方法？我猜我需要等待一些加载事件？我也不知道您对持续时间更改事件的意思是什么？你能详细说明一下吗？
如果实时指示器工作，使用相同的逻辑必须为您工作。见github.com/videojs/video.js/blob/… 和github.com/videojs/video.js/blob/…
我同意您的观点，即使用相同的逻辑来显示或隐藏 ProgressControl 和 LiveDisplay 可能是正确的方法，但我可以在定义 videojs 播放器的那一刻简单地检查 player.duration()目的？还是我必须等待一些事件？理想情况下，我会尽早获得这些信息。您的 github 链接表明此 updateShowing() 方法在 LiveDisplay 构造函数中被调用，但也在每个 player.durationchange 处更新。我可以确定 durationchange 最终会触发吗？它可能永远不会触发吗？
添加事件监听器后durationchange是否会触发取决于添加监听器时是否已知持续时间。这可能只是在时间上有所不同，例如加载流或浏览器差异的一些额外延迟，例如iOS 从不预加载。因此，立即和在事件中检查持续时间。