HTML Video: Is it possible to fallback to HLS for lack of DASH/Webm-VP9 support on Safari, or how do I support both Webm and H264 on DASH?

user_48660 0
Viewed 2108

I'm trying to serve some video content from a webserver, with the intention of supporting a reasonably wide set of browsers.

For iOS, as far as I can tell the way to go is to use HLS (HTTP Live Streaming) whereas on the desktop (and I guess Android?) MPEG-DASH is the state of the art. As a fallback I can provide a few static videos.

I've got this working on iOS with HLS and Chrome, Firefox, Opera, and Edge on desktop, but Safari on Mac just shows an activity spinner when I press play. As far as I can tell, this is because Safari tries and fails to use DASH as the playback method despite lack of Webm support and HLS being listed first.

For MPEG-DASH I have used Webm with VP9 and Opus, and my <video> tag looks something like this:

<video controls style="display:inline-block;max-width:174.22vh;max-height:98vh;width:98vw;height:55.125vw;background-color:#ccc;" preload="auto" poster="my-preview-image.jpg" data-dashjs-player>
    <source src="myvideo/hls/playlist.m3u8" type="application/x-mpegURL">
    <source src="myvideo/dash/manifest.mpd" type="application/dash+xml">
    <source src="myvideo/myvideo-vp9.webm" type="video/webm; codecs=vp9,opus">
    <source src="myvideo/myvideo-vp8.webm" type="video/webm; codecs=vp8,vorbis">
    <source src="myvideo/myvideo-h264.m4v" type="video/mp4; codecs=h264,aac">
</video>

And I'm just importing the reference DASH implementation using

<script src="dash.all.min.js"></script>

I'm generating the HLS and DASH streams using ffmpeg from a high-quality master video exported from Final Cut Pro. The static Webm fallback files are also generated using ffmpeg while the H264 static fallback file is a lower-bitrate export from Final Cut Pro.

Is there a way I can either:

  • Tell DASH to respect the order of the sources and not jump ahead of the HLS stream
  • Or, not kick in if video/webm; codecs=vp9,opus is not supported by the browser.

Finally, if neither of those are possible, can I support multiple different codecs simultaneously with DASH? i.e. can I provide both VP9 and H264 DASH streams and have it pick VP9 over H264 where supported and otherwise fall back to H264 (higher bitrate or lower quality)? How would I go about producing that stream data?

mpeg-dash http-live-streaming html5-video safari
1 Answers

From what you have shared, your browser will use the dashjs player when it encounters the video tag with the 'data-dashjs-player' attribute and the DASH player will focus on the formats it supports which do not include HLS.

As a crude solution you could check whether the browser can play HLS and use the native video tag if it can and your DASH player if it does not. Checking for HLS playback is a little undefined but the below approach appears to work at this time:

 document.createElement('video').canPlayType('application/vnd.apple.mpegURL')

This should return 'maybe' on a browser which can play HLS (only Safari at this time AFAIK) and nothing if it can't - I just tested it on Safari and Chrome and it seems to behave like this.

Its worth noting that dash.js should be able to play MPEG DASH files on safari so it may be worth looking into the console or logs to try to find why it will not play your DASH video.

user_3344020
Related