解决国内部分系统自带浏览器视频层级问题

问题描述

简单的视频播放，在小米/vivo 等自带浏览器发生视频控件覆盖其他UI

解决方案：

const loadWebVideo = async (url: string): string => {
  try {
    const headers = new Headers()
    headers.append("Range", "bytes=0-")
    const response = await fetch(url, { headers })

    if (!response.ok) {
      throw new Error("Network response was not ok")
    }

    const arrayBuffer = await response.arrayBuffer()
    const blob = new Blob([arrayBuffer], { type: "application/octet-stream" })
    const videoData = URL.createObjectURL(blob)
    return videoData
  } catch (error) {
    console.error("Error fetching web video data:", error)
    throw error
  }
}

传入你的 url 视频地址并返回 blob:// 直接放到你的video src 即可
⚠️ 需要注意的是在ios 系统上会造成视频无法播放，所以需要你去判断一下ios机型不用转换url