该视频无法在 android 上的画布中绘制，为什么？

问题描述

我想使用视频作为移动 html 页面的背景，并在其顶部添加一些其他 img 元素。在 PC chrome 上一切正常。但是，当我使用 Android 手机打开此页面时，video 元素将始终位于页面顶部。 z-index 似乎无效。

因此，我使用画布来绘制视频图像。它在 PC chrome 中仍然可以正常工作。但是在android浏览器中，画布似乎无法绘制视频图像，它始终是一个黑框。（我测试了img元素的绘制图像，这是可以的。）

我该如何解决？

这是我的代码。

import { useEffect,useRef } from 'react';

export default function App() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  let context: CanvasRenderingContext2D | null = null;

  function draw() {
    if (context && videoRef.current && canvasRef.current) {
      context.drawImage(
        videoRef.current,canvasRef.current?.width,canvasRef.current?.height,);
    }
    requestAnimationFrame(draw);
  }

  useEffect(() => {
    if (canvasRef.current) {
      context = canvasRef.current.getContext('2d');
      canvasRef.current.width = 300;
      canvasRef.current.height = 300;
      draw();
    }
  },[]);

  return (
    <>
      <video
        src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4"
        ref={videoRef}
        muted={true}
        playsInline={true}
        webkit-playsinline="true" />
      <canvas ref={canvasRef} />
    </>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）