canvas绘制动态视频并且在视频上加上自定义logo

实现的效果:可以在画布上播放动态视频,并且加上自定义的图片logo放在视频的右下角

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>绘制视频</title>
    </head>
    <body>
        <div>绘制视频</div>
        <canvas id="myCanvas" width="500" height="350"></canvas>
        <button id="player" style="display: block">暂停/播放</button>

        <script>
            // 获取画布
            const canvas = document.getElementById('myCanvas')
            // 获取画笔
            const ctx = canvas.getContext('2d')
            // 获取视频
            // const video = document.querySelector('video')
            const video = document.createElement('video')
            video.src = './assets/video.mp4'
            const logo = new Image()
            logo.src = './assets/ball.png'

            // 获取按钮
            const btn = document.querySelector('#player')
            btn.onclick = () => {
                // 判断视频是否在播放
                if (video.paused) {
                    video.play()
                } else {
                    video.pause()
                }
                renderVideo()
            }
            // 绘制视频
            const renderVideo = () => {
                // 绘制视频
                ctx.drawImage(video, 0, 0, 500, 350)
                // 还可以继续绘制一个logo
                // ctx.drawImage(logo, 460, 320, 40, 30)
                requestAnimationFrame(renderVideo)
            }
        </script>
    </body>
</html>
相关推荐
智联视频超融合平台1 小时前
慧港口新纪元:视频监控联网平台赋能高效安全运营
网络·网络协议·音视频·实时音视频·视频编解码
群联云防护小杜6 小时前
云服务器主动防御策略与自动化防护(下)
运维·服务器·分布式·安全·自动化·音视频
带娃的IT创业者12 小时前
《AI大模型应知应会100篇》第39篇:多模态大模型应用:文本、图像和音频的协同处理
人工智能·microsoft·音视频
18538162800余--13 小时前
短视频矩阵系统可视化剪辑功能开发,支持OEM
线性代数·矩阵·音视频
浮桥13 小时前
uniapp -- 实现微信小程序、app、H5端视频上传
微信小程序·uni-app·音视频
EasyDSS15 小时前
EasyCVR视频汇聚平台助力大型生产监控项目摄像机选型与应用
网络·人工智能·音视频
科技小E17 小时前
EasyRTC嵌入式音视频通信SDK智能安防与监控系统的全方位升级解决方案
大数据·网络·人工智能·音视频
18538162800余--18 小时前
短视频矩阵系统贴牌批量剪辑功能开发,支持OEM
线性代数·矩阵·音视频
脚本语言_菜鸟21 小时前
音频转base64
android·javascript·音视频
Donvink1 天前
【视频生成模型】通义万相Wan2.1模型本地部署和LoRA微调
人工智能·深度学习·aigc·音视频