javascript - videojs with live stream ts - Stack Overflow

admin管理员组

文章数量:1394060

I am trying to get a live stream from an IPTV service into a webpage for a magicmirror project. I am trying to get a single new channel to embed into the page.

I found that the ts file is using this URL, it loads fine in VLC: :826/live/hello/413.ts

I created an m3u8 that looks like this:

#EXTM3U

#EXTINF:-1

:826/live/hello/413.ts

When I use this code, the file never loads the stream from the provider.

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

I have run the stream through ffmpeg so that it dumps the files locally and then creates a local m3u8 file. If I then point the above code to that m3u8 file, it loads and runs fine - but I am not live, it's starting to copy the stream local from whenever I start it. So if I refresh the page, the stream begins from the beginning of the locally saved files again.

I am trying to get a live stream from an IPTV service into a webpage for a magicmirror project. I am trying to get a single new channel to embed into the page.

I found that the ts file is using this URL, it loads fine in VLC: http://host:826/live/hello/413.ts

I created an m3u8 that looks like this:

#EXTM3U

#EXTINF:-1

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

When I use this code, the file never loads the stream from the provider.

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

I have run the stream through ffmpeg so that it dumps the files locally and then creates a local m3u8 file. If I then point the above code to that m3u8 file, it loads and runs fine - but I am not live, it's starting to copy the stream local from whenever I start it. So if I refresh the page, the stream begins from the beginning of the locally saved files again.

• javascript
• html

Share Follow asked Nov 18, 2019 at 4:24 hend076hend076 3111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I know its been 6 months since this questions was asked, I recently worked on the similar issues and figured I'll share my solution.

You can do this with hls.js without creating m3u8 index.

Learn more about hls.js at: https://github./video-dev/hls.js/

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

HTML:

<script src="https://cdn.jsdelivr/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: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();
        });
    }
}

You can further optimize the buffer to what you need it to be by changing values of the hlsjsConfig. See hls.js API details here: https://github./dailymotion/hls.js/blob/master/docs/API.md#second-step-instantiate-hls-object-and-bind-it-to-video-element

The highlighted response only makes sense if the source server of the stream is broadcasting in both formats with similar links.

You may use mpegts.js to play this stream in the browser.

<script src="mpegts.js"></script>
<video id="videoElement"></video>
<script>
     if (mpegts.getFeatureList().mseLivePlayback) {
         var videoElement = document.getElementById('videoElement');
         var player = mpegts.createPlayer({
             type: 'mse', // could also be mpegts, m2ts, flv
             isLive: true,
             url: 'http://example./live/livestream.ts'
         });
         player.attachMediaElement(videoElement);
         player.load();
         player.play();
     }
</script>

This link has a plugin for videojs.

本文标签： javascriptvideojs with live stream tsStack Overflow