Let us assume that the following player configuration is given and we would like to apply source selection logic.

var config = {
  sources: {
    hls: [
      {
        mimetype: 'application/x-mpegurl',
        url: 'http://wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/ElephantsDream.smil/playlist.m3u8'
      }
    ]
  },
  playback: {
    preferNative: {
      hls: true,
      dash: false
    },
    streamPriority: [
      {
        engine: 'html5',
        format: 'dash'
      },
      {
        engine: 'html5',
        format: 'hls'
      }
    ]
  }
};

1. The player looks at the streamPriority array and see that the dash stream has the highest priority.
2. The player will check whether it received any dash sources within the sources object.
3. Since there are no dash sources in it, the player will move to the next priority from the streamPriority list which is hls.
4. After checking the sources object again and found hls sources, the player will choose to play hls.

However, will the player use the native HLS or not? This depends on the preferNative value for hls. Because this value is set to true, the player knows that if the browser supports native hls playback, the source will be played natively.

Given the configuration information above, which source will be played in each browser?

Following summarize the results for this scenario: