Video.js HTML5 player can play m3u8 playlist(HLS)?

Question

How can I play HLS stream in HTML5 player Video.JS? I find examples, where is this type source:

<source src="http://server/hls/stream007.m3u8" type='video/mp4' />

<source src="http://server/hls/stream007.m3u8" type='application/vnd.apple.mpegurl' />

<source src="http://server/hls/stream007.m3u8" type='application/x-mpegURL' />

Can anybody help me?

score 0 · Accepted Answer · answered Feb 12 '14 at 17:52

0

To use HLS on browsers that support it (Safari, iOS, some Androids) use the 'application/x-mpegURL'. You'll still need to provide an mp4 fallback for browsers that don't support HLS. Support for HLS in other browsers is currently in the works.

answered Feb 12 '14 at 17:52

heff

3,171
1
20
21

For browsers that don't support HLS I'll send same RTMP stream. I'd see that Chrome support HLS, but in my windows environment it don't play. – kilg Feb 13 '14 at 03:44

score 0 · Answer 2 · answered May 21 '14 at 15:00

I know this is an old post but what you could potentially do, if you wanted to is buffer the feed and do the following.

Get the .m3u8 file, download it and pull out the video files inside of them. Download those files & convert them to mp4 files via ffmpeg & then chain them together and play them in the browser. It's dirty but it will work.

score 0 · Answer 3 · answered Jul 28 '14 at 06:41

0

You can use Kaltura player which play the HLS using flash component which works from IE8 and use the native video playback on ios devices and android 4+.

answered Jul 28 '14 at 06:41

Itay Kinnrot

721
5
11

score 0 · Answer 4 · answered Apr 02 '15 at 19:55

0

just use mangui custom videojs flash player

https://github.com/mangui/video-js-swf

answered Apr 02 '15 at 19:55

mangui

1

score 0 · Answer 5 · answered Aug 06 '19 at 03:07

Some browser like edge you directly play ts without video.js. 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, use video.js like this,

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

Video.js HTML5 player can play m3u8 playlist(HLS)?

5 Answers5