Safari Compatibility on macOS? about videojs-quality-selector-hls HOT 8 OPEN

import type Player from 'video.js/dist/types/player'
import type { QualityLevel } from 'videojs-contrib-quality-levels'
import qualitySelector from 'videojs-quality-selector-hls'
import videojs from 'video.js'
import consola from 'consola'

interface CustomPlayer extends Player {
  [key: string]: any
}

const logger = consola.withTag('VideoFileEmbedPlayer')

const player = ref<CustomPlayer | undefined>(undefined)
const videoElement = ref()

onMounted(async () => {
  if (!videojs.getPlugin('qualitySelector')) {
    logger.log('🚧 register qualitySelector')
    videojs.registerPlugin('qualitySelector', qualitySelector)
  }

  
  player.value = videojs(videoElement.value, {
    qualityLevels: true,
    aspectRatio: '16:9',
    autoplay: false,
    preload: false,
    fluid: true,
    controlBar: {
      playToggle: {
        replay: false,
      },
      volumePanel: {
        inline: true,
      },
      currentTimeDisplay: true,
      timeDivider: true,
      durationDisplay: true,
      progressControl: true,
      remainingTimeDisplay: false,
      playbackRateMenuButton: true,
      qualitySelector: true, // Quality selector should show up
      fullscreenToggle: true,

      liveDisplay: false,
      customControlSpacer: false,
      chaptersButton: false,
      descriptionsButton: false,
      subtitlesButton: false,
      captionsButton: false,
      subsCapsButton: false,
      audioTrackButton: false,
      pictureInPictureToggle: true,
    },
    controls: true,
    playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3],
    loop: false,
    volume: 1,
    html5: {
      // VHS has to be present for Safari (macOS) to pic up the video stream.
      vhs: {
        useDevicePixelRatio: true,
        // NOTE: The NetworkInformationAPI appears to make things higher quality on Safari.
        useNetworkInformationApi: true,
        // NOTE: this overrides the native HLS support for Safari which in turn activates the ability to more finely control the resolutions available and logging to console.
        // This can be deactivated and it will use the quality level appropriate for the internet speed, screen resolution, pixel density.
        overrideNative: true, // this makes it possible for videojs to overtake the quality selection (could use overrideNative: !videojs.browser.IS_SAFARI)
      },
      hls: {
        useDevicePixelRatio: true,
        // NOTE: The NetworkInformationAPI appears to make things higher quality on Safari.
        useNetworkInformationApi: true,
        // NOTE: this overrides the native HLS support for Safari which in turn activates the ability to more finely control the resolutions available and logging to console.
        // This can be deactivated and it will use the quality level appropriate for the internet speed, screen resolution, pixel density.
        overrideNative: true, // this makes it possible for videojs to overtake the quality selection (could use overrideNative: !videojs.browser.IS_SAFARI)
      },
      // These two also did something which I don't remember, I think Android devices had problems when this was set to true.
      nativeAudioTracks: false,
      nativeVideoTracks: false,
      // nativeTextTracks: false,
    },
    sources: [{
      src: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8',
      type: 'application/x-mpegURL',
    }],
  }, async () => {
    if (!player.value) {
      logger.error('Player should have been ready but wasn\'t!')
      return
    }
    logger.log('Video Player Ready')
    
    // Activate Quality Selector
    player.value.qualitySelectorHls({
      displayCurrentQuality: true, // makes it display the quality level in text form vs. false => displays a icon.
      // placementIndex: 2,
      vjsIconClass: 'vjs-icon-hd',
    })

    // Add some logging to see if the video.js player even has information about quality levels
    const qualityLevels = player.value.qualityLevels()
    player.value.qualityLevels().on('addqualitylevel', (data: { qualityLevel: QualityLevel }) => {
      logger.log('📺 M3U8 playlist is loaded!', `${data.qualityLevel.height}p`, `${data.qualityLevel.bitrate / 1000} kB/s`)
    })
    player.value.qualityLevels().on('change', () => {
      logger.log('📺 Quality Level changed! New level:', qualityLevels[qualityLevels.selectedIndex])
    })
  })
})