IOS safari 中的画布叠加在视频上

Posted 2023-02-23

【中文标题】IOS safari 中的画布叠加在视频上

【英文标题】：Canvas superimposed over video in IOS safari

【发布时间】：2011-04-28 18:15:36

【问题描述】：

您可以在 ios Safari (IPAD) 中将画布叠加在视频上吗？ 我尝试将文本添加到画布，但它没有显示在视频播放的顶部。

在 SAfari 桌面上运行良好。

video_dom.addEventListener('play', function() 

        ctx_overlay.font = "bold 16px sans-serif";
        ctx_overlay.fillStyle="black"; 
        ctx_overlay.fillText("Video1 Video1 Video1", 200, 225);

, false);

<video id="video-canvas-fancy"   loop autoplay loop   style="position:absolute; top: 5; left: 5;"> 
<source src="http://severe-fire-901.heroku.com/videos/home.m3u8"> 
</video>
<canvas id="canvas-overlay"   style="position:absolute; top: 10; left: 10;">
</canvas>

【参考方案1】：

以后请提供更多细节或代码示例。

你的意思是<video>？使用绝对定位，您应该可以在其上放置任何东西。

如果您在 IOS 上因某些（错误）原因不能，您始终可以使用 <canvas> 来渲染视频（每 x 帧/秒调用一次 context.drawImage(video,0,0)），然后在其上渲染内容或在第二个画布上。