Question

我正在尝试将IPTV服务的实时流传输到magicmirror项目的网页中。我试图将一个新的频道嵌入到页面中。

我发现ts文件正在使用此URL，它可以在VLC中正常加载：http://host.net:826/live/hello/413.ts

我创建了一个看起来像这样的m3u8：

#EXTM3U

#EXTINF:-1

http://host.net:826/live/hello/413.ts

当我使用此代码时，文件永远不会从提供程序加载流。

<video-js id="my_video_1" class="center" controls autoplay preload="auto" width="950" height="600">
  <source src="playlist.m3u8" type="application/x-mpegURL">
</video-js>
  </div>
<script>
  var player = videojs('my_video_1', {
    html5: {
      hls: {
        overrideNative: true
      }
    }
  });
</script>

我已经通过ffmpeg运行流，以便它在本地转储文件，然后创建本地m3u8文件。如果然后将上面的代码指向该m3u8文件，它将加载并正常运行-但我并不活跃，无论何时启动它，它都会开始在本地复制流。因此，如果刷新页面，则流将从本地保存文件的开头再次开始。

Answer 1

我知道距提出此问题已有6个月了，最近我在处理类似问题，并认为我会分享我的解决方案。

您可以使用hls.js进行此操作，而无需创建m3u8索引。

通过以下网址了解有关hls.js的更多信息：https://github.com/video-dev/hls.js/

首先将.ts流URL重命名为.m3u8，无需创建m3u8索引http://host.net:826/live/hello/413.ts-> http://host.net:826/live/hello/413.m3u8

HTML：

 plot(mtcars$wt,type = 'h',ylim = c(0,6))
    abline(h=4)
    text(mtcars$wt,row.names(mtcars[mtcars$wt >4,]),pos =3,col='blue',cex=0.6))

JavaScript：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<button type="button" onclick="PlayVideo();">Play</button>
<video id="video" controls autoplay crossorigin="anonymous" />

您可以通过更改hlsjsConfig的值来进一步优化缓冲区，使其达到所需的大小。在此处查看hls.js API详细信息：https://github.com/dailymotion/hls.js/blob/master/docs/API.md#second-step-instantiate-hls-object-and-bind-it-to-video-element

带有实时流ts的videojs

1 个答案: