CODEWITHSUNDEEP
videohtml5-videohttp-live-streamingvideo.js
Linablog444
Linablog444

Reputation: 1

Play M3U8 or TS live stream using Video JS

I am trying to use VideoJS to play a live stream:

https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8

(1) I tried to use a .m3u8 playlist:

<video id='hls-example' class="video-js vjs-default-skin" width="500" height="400" controls>
  <source type="application/x-mpegURL" src="https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8">
</video>

(2) I tried to use a .ts video file url:

<video id='hls-example' class="video-js vjs-default-skin" width="500" height="400"http://www.q7t1.com:8000/live/sYKADDaJs2/SnoQc6v4hZ/186.ts">
</video>

Upvotes: 0

Views: 5192

Answers (1)

VC.One
VC.One

Reputation: 15936

You can try a setup like this (modified from the documentation example):

<!DOCTYPE html>
<html>

<body>

<video id="live_video" width="500" height="400" class="video-js vjs-default-skin" controls>
  <source
     src="https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8"
     type="application/x-mpegURL">
</video>

</body>

<!-- Put these JS files together with this HTML file -->
<script src="video.js"></script>
<script src="videojs.hls.min.js"></script>

<script>
var player = videojs('live_video');
player.play();
</script>

</html>

PS: If Blogger doesn't allow you to upload JS files to same location as your HTML page (eg: your blog article), then try loading JS files from some external server:

Replace:

<script src="video.js"></script>
<script src="videojs.hls.min.js"></script>

With:

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

Upvotes: 1

Related Questions