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

StackOverflow https://stackoverflow.com/questions/21726870

  •  10-10-2022
  •  | 
  •  

Pregunta

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?

¿Fue útil?

Solución

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.

Otros consejos

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.

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

just use mangui custom videojs flash player

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

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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top