Playing a IPTV live tv stream with VideoJS or similar

Question

I'm trying to play live tv channel with videojs. I've tried various ways but always get "No compatible source was found for this media." error. Other videos are playing fine.

The url plays fine in VLC and the codec shows the stream as "MPEG-H Part2/HEVC (H.265) (hevc)".

I've tried across a range of browsers too, chrome, firefox, safari and edge.

This is the bones of the code. Is there a way to play it ?

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

<video id='live-video' class='video-js vjs-default-skin' controls>
</video>

<script>
  var player = videojs('live-video');
  player.src({ src:'https://www.example.com/play.php?OTUxE2NDUN', type:'application/x-mpegurl'});
  player.play();
</script>

I've never had need of any of this. But, I do notice that the 'class=' spec needs two extra ones, according to: https://docs.videojs.com/tutorial-live.html Hope this helps. — David, Feb 23 '22 at 02:13
thanks, I assume you're talking about 'vjs-live' and 'vjs-liveui' ? Adding these made no difference. — mrsmith, Feb 23 '22 at 12:10
Meanwhile, I've been playing around, doing more experiments with this whole 'live' notion. It's unclear by the looks of your code, whether your trying to use 'hls' or 'dash'. Anyway, I've been playing (only) with 'hls', and I'll have some results to report, in another day or two. — David, Feb 27 '22 at 06:05
@David thanks, I’ve tried lots of variations of above, hls, dash, different type attributes but had no luck. It would be great if you had some success with it. I tried a streaming class which used ffmpeg to create a hls stream but it also wouldn’t play. I was hoping to play it direct without any conversion though. — mrsmith, Feb 28 '22 at 12:55

David · Answer 1 · 2022-03-09T20:47:29.263

I've concluded there is nothing wrong with the coding you show in your base posting (question). I speculate that the ACTUAL source URL you were using is NOT a valid HLS stream, and hence the cause of your stated error. (It's possible that it is a valid DASH stream, but I'm reasonably certain your code would NOT work with a DASH stream.)

Here's is some working code that is equivalent to yours, except that it uses the newer (recommended) UI / API, mentioned in the Video.js live tutorial. The key to WHY the code below works is simply that it DOES reference a valid HLS stream...(a URL that I stumbled upon, on the Internet).


<!DOCTYPE html>
<html>
<head>
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<!--  [ Note:  HLS code is "built-in" to video.js, as of version 4.x, so we should NOT include (possibly older?) HLS support separately ]  -->
<!--   script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script  -->
<!--   script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script -->
</head>

<video id='live-video' class='video-js   vjs-default-skin    vjs-live  vjs-liveui'    width='640' height='360'  controls  muted>
</video>

<script>
// The extra 'liveui' arg below, and two extra classnames are not REQUIRED, but documentation-tutorial
// refers to it as the newer/preferred API    See:  https://docs.videojs.com/tutorial-live.html
   var  player = videojs('live-video', {liveui: true} );
   player.src({ src:'https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8', type:'application/x-mpegurl'});
   // Note: We begin with the stream playing, but the audio is initially 'muted' (see that attribute in video tag above )
   //   See:   https://stackoverflow.com/questions/70719678/html5-video-autoplay-with-sound-unmuted
   player.play();
  
  /*   Note: Their "playlist.m3u8" file in their URL contains these lines (this info helps us understand the goal of their HLS)
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=2130537,RESOLUTION=1920x1080,CODECS="avc1.4d4028,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_1080p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1292733,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_720p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=557217,RESOLUTION=640x360,CODECS="avc1.77.30,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_360p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=418515,RESOLUTION=426x240,CODECS="avc1.42c015,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_240p/chunks.m3u8
*/
</script>
</body>
</html

score 0 · Answer 2 · edited Jun 22 '22 at 06:46

Here is a simpler method of playing streaming video in your webpage. You can customize it to your liking by adding parameters and code from the video.js website guide.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>UN Web TV</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>
    <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup='{}'>
      <source src="https://cdnapi.kaltura.com/p/2503451/sp/250345100/playManifest/entryId/1_gb6tjmle/protocol/https/format/applehttp/a.m3u8" type="application/x-mpegURL">
    </video>
    <script>
      var player = videojs('my_video_1');
      player.play();
    </script>
  </body>
</html>

Playing a IPTV live tv stream with VideoJS or similar

2 Answers2