Javascript 视频JS与实时流ts

我正在尝试从IPTV服务中获取一条实时流，并将其放入magicmirror项目的网页中。我试图得到一个单一的新频道嵌入到页面

我发现ts文件正在使用此URL，它在VLC中加载良好：

我创建了一个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>

var player=videojs（'my_video_1'{
html5：{
hls：{
覆盖：true
}
}
});

---

我已经通过ffmpeg运行了该流，以便它在本地转储文件，然后创建一个本地m3u8文件。如果我将上面的代码指向该m3u8文件，它将加载并运行良好——但我不是live，它将在我启动它时开始从本地复制流。因此，如果我刷新页面，流将再次从本地保存的文件的开头开始。

我知道这个问题已经问了6个月了，我最近也处理过类似的问题，我想我会分享我的解决方案

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

了解有关hls.js的更多信息，请访问：

首先将.ts流URL重命名为.m3u8，无需创建m3u8索引->

HTML:

---

通过更改hlsjsConfig的值，可以进一步优化缓冲区，使其达到所需的状态。请参见此处的hls.js API详细信息：

我知道这一问题已经问了6个月了，我最近也处理过类似的问题，我想我会分享我的解决方案

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

了解有关hls.js的更多信息，请访问：

首先将.ts流URL重命名为.m3u8，无需创建m3u8索引->

HTML:

通过更改hlsjsConfig的值，可以进一步优化缓冲区，使其达到所需的状态。请参见此处的hls.js API详细信息：

<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" />

function PlayVideo() {
    var video = document.getElementById('video');
    var videoSrc = "http://host.net:826/live/hello/413.m3u8";
    if (Hls.isSupported()) {
        // The following hlsjsConfig is required for live-stream
        var hlsjsConfig = {
            "maxBufferSize": 0,
            "maxBufferLength": 30,
            "liveSyncDuration": 30,
            "liveMaxLatencyDuration": Infinity
        }
        var hls = new Hls(hlsjsConfig);
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    } 
    else if (elementId.canPlayType('application/vnd.apple.mpegurl')) {
        elementId.src = videoSrc;
        elementId.addEventListener('loadedmetadata', function () {
            elementId.play();
        });
    }
}