How to play MPEG-TS in chrome

Asked 22/8, 2017 at 12:21 Answered 10/10, 2022 at 18:56

I have a video in which I want to show the user ( 'the' user because he can access Chrome PC or Chrome android).

If it's possible it would have nice to use html5 tags, but since it TS it can't...

So, I need a better suggest on how could I play them rather then open vlc and copy&past the file path. But that's terrible idea...

I saw this library which add VLC protocol ( vlc:// links ), but I prefer to use server side solutions.

I uploaded an example file in which you could see here.

I don't want to convert all the files into another format.

Edit: If someone comes here in future, after take @szatmary advice, there are some projects on GitHub who do it, however I can't use any of them without partially convert ( in a manner ), and since i'm working with extremely big files (10G+) and extremely weak computer ( Single 1.8 Cpu core ) I manage to display the audio only, not a real solution, but covers my needs.

Insolvency answered 22/8, 2017 at 12:21 Comment(0)

Convert the file to mp4. If the ts file is h.264+aac, you can convert to fmp4 in javascript and play via media source extensions, but that is A LOT of code to get working.

Eddaeddana answered 22/8, 2017 at 17:46 Comment(0)

You can play the ts directly with index m3u8 file, if not you can make the m3u8 file, which is just the index of the ts file.

Some browser like edge you directly play ts. Refer to this answer

<video width="352" height="198" controls>
    <source src="index.m3u8" type="application/x-mpegURL">
</video>

For other browser like firefox and chrome, you need to feed the ts to video with js something like video.js,

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>

  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

</head>
<body>
  <h1>Video.js Example Embed</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="index.m3u8" type="application/x-mpegURL">
  </video>

  <script>
  </script>

</body>
</html>

Apart from playing the ts file, you also can convert it to mp4.

You can use pipe these ts files in to ffmpeg and output the mp4 file.

cat *.ts | ffmpeg -i pipe: -c:a copy -c:v copy output.mp4

or If you ts file name not have order,

grep .*.ts index.m3u8 | xargs cat | ffmpeg -i pipe: -c:a copy -c:v copy output.mp4

Friedlander answered 6/8, 2019 at 3:14 Comment(1)

Chrome doesn't support mpeg-ts even if you install a plugin. mpeg4 works fine, but for mpeg-ts (aka mpeg2) the code you've provided just show a rotating circle – Graff 10/10, 2022 at 18:46

I've tried all described solutions and found out that Chrome doesn't support mpeg-ts, with HPL Player plugin or without it. All solutions support mpeg4 only. Too bad, given that converting a stream from mpeg2 to mpeg4 by ffmpeg consumes 98% of my CPU, while using '-v copy' option takes not more than 4%.

Safari does support mpeg2 natively without any plugins though, e.g. this js works fine:

<body>
  <video width="640" height="480" controls autoplay
         src="http://<streaming-server>:port/path-to-index.m3u8">
  </video>
</body>

Graff answered 10/10, 2022 at 18:56 Comment(0)

Recommended topics

Hot tags