html 视频标签的播放事件在 IOS 上不起作用

Question

我屏蔽了一个疯狂的问题...我必须使用视频标签才能操作视频的播放和暂停。视频已正确加载，我可以看到海报，我可以用进度条更改当前时间，但播放方法不起作用。

这是我关注的堆栈的结尾：

• 下一个 13.3
• hls.js（终于不关心了）

iPhone 7 和 10 IOS 15.7.3

这是我的组件：

import React, { useEffect, RefObject, useRef } from 'react'
// import styles from './VideoPlayer.module.css'
import HLS from 'hls.js'

type Props = {
  videoRef: RefObject<HTMLVideoElement>
  className: any
}

const VideoPlayer = ({ className, videoRef }: Props) => {
  const videoSourceRef = useRef<HTMLSourceElement>(null)

  const streamURL = 'https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8'

  useEffect(() => {
    if (HLS.isSupported() && videoRef) {
      const video = videoRef.current as HTMLVideoElement
      video.addEventListener('contextmenu', (e) => {
        e.preventDefault()
        return false
      })
      const hls = new HLS()
      hls.loadSource(streamURL)
      hls.attachMedia(videoRef.current!)
    } else {
      console.log('IOS Apple Mobile Device')
      videoSourceRef.current!.src = `${streamURL}`
      videoSourceRef.current!.type = 'application/x-mpegURL'
      videoRef.current!.load()
    }
    return () => {
      // TODO clean
    }
  }, [videoRef])

  return (
    <video
      width="352"
      height="198"
      className={className}
      ref={videoRef}
      data-html5-video
      id="video"
      controls
      playsInline
      muted
      loop
      preload="metadata"
    >
      <source ref={videoSourceRef} />
      <track default kind="captions" srcLang="en" />
    </video>
  )
}
export default VideoPlayer

为什么可能？当我点击播放控制时， 视频冻结，如果我点击暂停控制，我收到一个错误：

Unhandled Promise Rejection: AbortError: The operation was aborted

目前它适用于 Chrome、Safari(OSX)、Firefox、Edge 和 Android... 肯定有一些我没有看到或者我不明白或者我被迫使用 VideoJS 的东西？？

...

我只想在我的 IOS 网络应用程序上阅读 m3u8，并且无需用户操作即可处理方法播放和暂停。