oplayer-plugin-hls

npm i @oplayer/hls hls.js

<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.min.js"></script>
 
<div id="oplayer" />
 
<script>
  OPlayer.make('#oplayer', {
    source: {
      src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      poster: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/poster.png'
    }
  })
    .use([OHls({ library: 'https://cdn.jsdelivr.net/npm/hls.js@0.14.17/dist/hls.min.js' })])
    .create()
</script>

OHls({
  forceHLS: true, // use hls.js not native
  defaultQuality(levels) {
    let id = -1 // -1 => 'auto'
    for (let i = 0; i < levels.length; i++) {
      if (levels[i].height <= 1080) id = i
    }
 
    return id
  },
  defaultAudio(tracks) {
    for (const { lang, id } of object) {
      if (lang == 'en' || lang.startsWith('en')) {
        return id
      }
    }
 
    return -1 // -1 => brower lang
  },
  defaultSubtitle(tracks) {
    for (const { lang, id } of object) {
      if (lang == 'en' || lang.startsWith('en')) {
        return id
      }
    }
 
    return -1 // -1 => brower lang
  }
})

OHls({
  errorHandler(player, data) {
    // skip bufferAppendError
    if (data.details == 'bufferAppendError') return
 
    player.emit('error', {
      ...data,
      message: data.type + ': ' + data.details
    })
  }
})