Search code examples
htmlsafarihtml5-videoosx-elcapitanhttp-live-streaming

HLS live streams not working in Safari on OS X El Capitan with the HTML 5 <video> tag


I'm seeing a very strange issue where I'm able to view a live video stream over HLS (mpeg-TS as the container) on older versions of OS X, but not in the latest version (El Capitan). I'm using Safari 9.0.1 in both scenarios.

Essentially, I have a trivial HTML 5 <video> tag, giving the live stream's URL as a source. In older versions of OS X this plays without issue, but on OS X 10.11.1 it will show at best one frame, and then not play.

Here is a small code snippet to reproduce, with a stream for testing.

<!DOCTYPE html> 
<html> 
  <body> 
    <video width="400" controls autoplay>
      <source src="http://204.101.47.140:8080/cameras/1eq0U31IYNNWUOss/live.m3u8?stream=3ddf9e2c-46f6-40a0-e010-272d1a058369">
    </video> 
  </body> 
</html>

There are no relevant errors visible in the browser console, and I've been able to reliably reproduce this working on OS X Mavericks/Yosemite, and not working on El Capitan across several machines.

What changes are required to the above code to make it work on Safari across all recent versions of OS X?


Solution

  • Your video source is not a valid HLS stream. It is an HLS/pseudo-streaming mix. The stream master resource (http://204.101.47.140:8080/cameras/1eq0U31IYNNWUOss/live.m3u8?stream=3ddf9e2c-46f6-40a0-e010-272d1a058369) is a valid HLS playlist that contains a single element. So far so good. However this element is not a finite piece of the whole video stream. It is a resource that when requested starts pseudo streaming the whole live stream.

    This is not a valid HLS stream. I don't know which media server you use, if any, but it is not configured properly.