时间戳

首页 > 解决方案 > 如何检测嵌入在 WordPress 中的 MUX 视频是流式传输还是播放固定长度的视频？

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

问题描述

我在这里搜索并找到了一些非常古老的答案，但我认为这个问题尚未得到解答。我在 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 来显示视频，但我无法在文档中找到任何有用的功能，这些功能可以告诉我有问题的视频是直播还是某些以前广播的直播或上传的固定持续时间的视频（大概是渐进式下载？）。看起来很明显，页面中运行的 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，但在这种情况下这对我不起作用，并且会缩短我的页面加载时间。

标签： javascriptwordpressvideo.jslive-streaming

解决方案

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

推荐阅读