如何解决该视频无法在 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 举报,一经查实,本站将立刻删除。