Playing back audio only HLS (m3u8) and MPEG DASH (mpd)

Question

What is the best way to play back a HLS with fallback MPEG DASH audio only stream. The m3u8 works well in Safari but neither work in Chrome as far as I can see.

  <video controls="true">
      <source type="video/mp4" src="http://example.com:8080/dash-audio/77PL4KA42.mpd" />
      <source type="application/x-mpegurl" src="http://example.com:8080/hls-audio/EU9TVX1D9.m3u8" />
  </video>

Answer 1

There is no best way unfortunately.

The battle of video (and audio) encoding formats is still on-going and this is one case where this shows it effect: it works in one browser but not in another.

The "best way" is currently to provide the video in different formats such as mp4, webm, ogg video and you can provide the m3u8 stream format in addition. You can select priority of which format you want to be read (if possible) by the order of the source tags (first tag will have first pri - if that cannot be played the next will be tried and so on).

There are free converters out there that can batch convert your videos but they support only the most common formats (which excludes m3u8).

If you want audio only then the <audio> tag is probably better suited I would think :-)

Answer 2

You could use the hls.js library (https://github.com/video-dev/hls.js) to get HLS streams to play on browsers that don't support HLS natively such as Chrome & Firefox. Here is a snippet for a minimal setup (taken directly from the link provided)

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>