iOS playback not working

[nixolas1]

Hi, we're having issues with playing video on iOS devices. We have tested on iPhone 7, X, and 11. I read that hls.js dosn't support iOS, but that you can use a video element directly with an m3u8 source. It seems like that is being done here, but it still does not work. (Just a black/blank element)

Here is the element itself on an iPhone 11:

And here is our website with the sanity mux player: https://5e26f2b95a76c500071ec00d--ambassaden.netlify.com/

[nixolas1]

We found this interesting info:

On iPhone,

from https://webkit.org/blog/6784/new-video-policies-for-ios/

Hacked in a playsinline attribute and seems to work on iOS!

[mornir]

I was also quite confused by this. I thought there's something wrong about the hls.js library. The worst is that it's not the first time that I live this situation with missing playsinline attribute 😅

[AllanPooley]

This is the temporary fix I'm using 😢

videoRef.current.querySelector('video').setAttribute('playsinline', '')

const MuxVideo = (props) => {
  const { className, video } = props
  const styles = useStyles()
  const videoRef = useRef()
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.querySelector('video').setAttribute('playsinline', '')
    }
  }, [])
  if (!video?.video) return null
  return (
    <div className={cn(className || null, styles.videoContainer)} ref={videoRef}>
      <SanityMuxPlayer
        assetDocument={video.video}
        className={styles.video}
        autoload
        autoplay
        muted
        loop
        width='100%'
        showControls={false}
        poster
      />
    </div>
  )
}