如何从JWPlayer 8.2直播HLS流中获取#EXT-X-PROGRAM-DATE-TIME

我之前在处理JW Player 8.2的直播HLS流时，也碰到过和你一模一样的问题——VOD模式下on('meta')事件能轻松拿到programDateTime，但直播流明明m3u8里有#EXT-X-PROGRAM-DATE-TIME字段，JW Player就是不把它暴露出来。这里有几个我亲测有效的解决办法：

方法1：直接访问JWPlayer的HLS实例获取片段时间 #

JW Player 8.x底层依赖HLS解析器，我们可以直接监听它的播放列表解析事件，从每个媒体片段里提取#EXT-X-PROGRAM-DATE-TIME的值：

// 等待播放器初始化完成
jwplayer('your-player-id').on('ready', function() {
  const hlsInstance = this.hls;
  if (!hlsInstance) return;

  // 监听直播播放列表解析完成事件
  hlsInstance.on('hlsManifestParsed', function(event) {
    // 遍历所有清晰度层级的片段
    event.levels.forEach(level => {
      level.details.fragments.forEach(fragment => {
        // fragment.programDateTime就是对应#EXT-X-PROGRAM-DATE-TIME的原始值
        if (fragment.programDateTime) {
          // 可以转成Date对象方便处理
          const liveDateTime = new Date(fragment.programDateTime);
          console.log('当前直播片段的时间:', liveDateTime);
          // 这里可以把这个值传递给你的业务逻辑，比如更新页面显示
        }
      });
    });
  });
});

这个方法的优势是能实时获取每个新加载片段的时间，完全贴合直播流的动态更新特性，而且不需要额外的网络请求。

方法2：手动请求并解析直播m3u8文件 #

如果第一种方法因为播放器配置或版本限制无法生效，可以自己定时请求直播的m3u8文件，手动解析其中的#EXT-X-PROGRAM-DATE-TIME字段：

function getLiveProgramDateTime(playlistUrl) {
  fetch(playlistUrl)
    .then(res => res.text())
    .then(playlistContent => {
      const lines = playlistContent.split('\n');
      let targetDateTime = null;
      // 遍历m3u8的每一行，找到目标字段
      lines.forEach(line => {
        if (line.startsWith('#EXT-X-PROGRAM-DATE-TIME:')) {
          targetDateTime = line.replace('#EXT-X-PROGRAM-DATE-TIME:', '').trim();
          const formattedDate = new Date(targetDateTime);
          console.log('最新直播时间:', formattedDate);
        }
      });
      return targetDateTime;
    })
    .catch(err => console.error('获取直播时间失败:', err));
}

// 根据你的直播片段时长调整定时间隔，比如每10秒请求一次
setInterval(() => {
  getLiveProgramDateTime('https://your-live-hls-url.m3u8');
}, 10000);

注意：如果你的页面和直播m3u8不在同一个域名下，需要确保直播服务器配置了CORS允许跨域请求。

方法3：检查JWPlayer的HLS配置 #

有些情况下，可能是播放器默认关闭了programDateTime的解析，可以尝试在初始化时添加相关配置：

jwplayer('your-player-id').setup({
  file: 'https://your-live-hls-url.m3u8',
  type: 'hls',
  hlsConfig: {
    enableProgramDateTime: true // 强制开启programDateTime解析
  }
});

不过我记得8.2版本的直播模式下，即使开启这个配置，on('meta')事件还是不会返回programDateTime，但可以试试这个配置是否能让方法1中的HLS实例更稳定地拿到数据。

内容的提问来源于stack exchange，提问作者Stef