videojs 與現場 stream ts

Question

我正在嘗試將來自 IPTV 服務的實時 stream 獲取到一個magicmirror 項目的網頁中。 我正在嘗試將一個新頻道嵌入到頁面中。

我發現 ts 文件正在使用這個 URL，它在 VLC 中加載良好： http://host.net:826/live/hello/413.ts

我創建了一個如下所示的 m3u8：

#EXTM3U

#EXTINF:-1

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

當我使用此代碼時，該文件永遠不會從提供程序加載 stream。

<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 運行了 ZF7B44CFFAFD5C52223D5498196C8A2E7BZ，以便它在本地轉儲文件，然后創建本地 m3u8 文件。 如果我然后將上面的代碼指向該 m3u8 文件，它會加載並運行良好 - 但我不在現場，它開始從我啟動它時復制本地 stream 。 因此，如果我刷新頁面，stream 會再次從本地保存文件的開頭開始。

Answer 1

我知道這個問題被問到已經 6 個月了，我最近處理了類似的問題，並想我會分享我的解決方案。

您可以使用 hls.js 執行此操作，而無需創建 m3u8 索引。

在以下位置了解有關 hls.js 的更多信息： https://github.com/video-dev/hls.js/

Start by renaming.ts stream URL to.m3u8, there is no need to create m3u8 index http://host.net:826/live/hello/413.ts - > http://host.net:826/live/你好/413.m3u8

HTML：

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

Javascript：

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();
        });
    }
}

您可以通過更改 hlsjsConfig 的值來將緩沖區進一步優化為您需要的值。 在此處查看 hls.js API 詳細信息： https://github.com/dailymotion/hls.js/blob/master/docs/API.md#second-step-instantiate-hls-object-and-bind-it-to-視頻元素