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>
相关推荐
胖虎18 小时前
深入解析 iOS 视频录制(三):完整录制流程的实现与整合
ios·音视频·cocoa·ios视频录制·自定视频录制
AI服务老曹8 小时前
确保设备始终处于最佳运行状态,延长设备的使用寿命,保障系统的稳定运行的智慧地产开源了
人工智能·开源·云计算·音视频
余~~1853816280013 小时前
短视频矩阵碰一碰发视频源码技术开发,支持OEM
网络·人工智能·线性代数·矩阵·音视频
道剑剑非道15 小时前
YOLO11 【四】 【DNF制作自己的数据集,切割视频以及labelimg 闪退问题】
音视频
lucy1530275107915 小时前
芯麦GC4344立体声数模转换芯片深度解析:高精度音频与动态采样率技术
人工智能·单片机·物联网·机器学习·音视频·智能锁门锁
Black蜡笔小新20 小时前
WebRTC嵌入式视频通话SDK:EasyRTC从免插件到轻量级带来的音视频通话技术
音视频·webrtc·sdk·rtc·webp2p
EasyNVR20 小时前
EasyRTC:开启智能硬件与全平台互动新时代
网络·音视频·webrtc·p2p·智能硬件·视频监控
EasyGBS20 小时前
从开发到部署:EasyRTC嵌入式视频通话SDK如何简化实时音视频通信的集成与应用
音视频·webrtc·实时音视频·视频监控
AI服务老曹1 天前
通过感知、分析、预测、控制,最大限度发挥效率的智慧油站开源了
人工智能·开源·自动化·音视频
St-sun1 天前
短视频导演编导制片人编剧教程策划影视媒体电商摄影后期 知识总结
音视频·媒体